Skip to content

Custom TypeScript Decorators for the Angular Framework

Notifications You must be signed in to change notification settings

pkelleter/angular-decorators

Repository files navigation

Custom TypeScript Decorators for Angular

Several custom TypeScript Decorators for the Angular Framework, making the live of Angular developers easier.

PropertyStream

@PropertyStream(sourceKey?)
Automatically creates a RxJS stream to a corresponding property, i.e. whenever the corresponding property gets updated, the newly created stream will emit accordingly.
When the component is destroyed, the corresponding stream will complete.

sourceKey
The key of the property which should be streamed.
Defaults to the annotated property-key itself, while remove all $ signs, e.g. if you annotate the generated stream myProperty$, the corresponding property will default to myProperty.

Memoize

@Memoize(sharedCache?)
Applies the concept of memoization to a given function, i.e. whenever a function is called with the same arguments more than once, the cached result will be returned immediately instead of running the function body again.
This approach is called memoization and naturally should only be applied to pure functions (no side-effects, always returns the same value for a given set of arguments)

sharedCache
By default the memoization cache will be shared amongst multiple instances of the same class. If a new cache should be created for every instance of the given class instead, sharedCache should to be set to false instead

EmitOnDestroy

@EmitOnDestroy()
Creates a subject which emits once and immediately completes after ngOnDestroy was called. This can be used to easily implement the takeUntil() pattern for subscriptions which have to be canceled on a component's destroy hook.

For angular based frameworks that have their own lifecycle-hooks like e.g. ionic, hooks can be specified via configuration. Example:

@EmitOnDestroy({
    initialize: 'ionViewDidEnter',
    terminate: 'ionViewDidLeave'
})

WebStorage

@WebStorage(key?, type?)
Ties the current value of the given property to the WebStorage of the browser. This means values are read from and written to the WebStorage respectively. That makes it super easy to share data among different tabs/sessions, etc.

All values are JSON encoded/decoded in order to support complex objects - however please keep in mind that not all modern types are serializable (e.g. Maps, Sets).

key
They key to store the given value to in the corresponding WebStorage. Any key may be used, but keep in mind that name-collisions will lead to the exact same property in the WebStorage which may cause problems if not handled properly.
Defaults to the propertyKey itself, lead by the prefix __webStorage_, e.g. if you annotate the property myProperty, the corresponding WebStorage key will default to __webStorage_myProperty.

type
Supported types of WebStorage are local (localStorage) and session (sessionStorage). Defaults to local.

About

Custom TypeScript Decorators for the Angular Framework

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published