ngx-decorator
Set of useful decorators for Angular.
Installation
npm install ngx-decorator --save
Supported decorators
Lifecycle hooks decorators
Decorators for Angular lifecycle management
@TakeUntilDestroy
@TakeUntilDestroy
- unsibscribes from an Observeble on ngOnDestroy
lificycle hook:
First you need to decorate your component class which implements OnDestroy
interface with @TakeUntilDestroy
decorator:
;
Next step is to create private field componentDestroy: Function
in your component and use it in pipe method with rxjs takeUntil
operator:
;
@TrackChanges
@TrackChanges
- binds @Input
field to execution of component method with provided changes strategy:
Decorator accepts 3 argumaents:
- key
- name of @Input()
field
- methodName
- name of method to be called when
- strategy
- ChangesStrategy
enum
In this snippet counterChange
method will be called on every data-bound property change of @Input() counter
field using ChangesStrategy.NotFirst
:
;
Utils decorators
Useful utils decorator for Angular
@Safe
@Safe
- catches application errors and forwards them to proper errorHandler depending on SafeLogLevel
provided:
Decorator accepts 1 argumaent of type SafeParams<T>
:
Available Log Levels:
Decorate any method in component with @Safe
decorator in following way:
;
Then see error in your ErrorHandler class:
@Cache
@Cache
- caches results of functions:
Decorator accepts 1 argumaent of type CacheParams<T>
:
Store result of a function in cache:
;
In this snippet result of forth call to this.add
will be retrived from cache.
@OutsideAngular
@OutsideAngular
- escape Angular's zone and do work that doesn't trigger Angular change-detection
Decorator does not accepts parameters:
;
In this snippet each tick of increaseProgress
function willbe executed in Angular's parent zone
HTTP decorators
To start using http decorators first you need to decorate you class with @HttpApi
decorator:
;; ;
@HttpApi
decorator is used to define base API url. For example in this url - /api/user/1488
, api
is base url. Once base url defined you can start using http decorators:
@Get
@Get
- makes HTTP GET request with HttpParams:
...;
@Post
@Post
- makes HTTP POST request with HttpParams:
...;
@Put
@Put
- makes HTTP PUT request with HttpParams:
...;
@Patch
@Patch
- makes HTTP PATCH request with HttpParams:
...;
@Delete
@Delete
- makes HTTP DELETE request with HttpParams:
...;
@Request
@Request
- makes HTTP request with defined method:
...;