@witty-services/ngx-common v10.0.0

NgxCommon

Informations

:warning: Since version 2.0.3, ngx-common and rxjs-common have been published under @paddls namespace. We continue to maintain @witty-services namespace, but now, ngx-common depends on @paddls/rxjs-common

Summary

• How to install
• Get Started
  • @OnAttributeChange
  • takeUntilDestroy
  • Error handling
  • Configuration provider
  • Local storage service
  • @Log

How to install

npm install --save @paddls/ngx-common

Get Started

@OnAttributeChange

Decorator @OnAttributeChange allow you to observe a class attribute with an observable.

Usage:

import { takeUntilDestroy, OnAttributeChange } from '@paddls/ngx-common';
import { Observable } from 'rxjs';

class MyComponent {

  public attribute: string;

  @OnAttributeChange('attribute')
  public myAttribute$: Observable<string>; // emit value on each modification of the referent attribute

  public constructor() {
    this.myAttribute$.pipe(
      takeUntilDestroy(this),
    ).subscribe(() => {
      // do some stuff
    });
  }
}

takeUntilDestroy

takeUntilDestroy will automatically unsubscribe any RxJS subscription on component or directive destruction.

Usage:

import { takeUntilDestroy, OnDestroyListener } from '@paddls/ngx-common';
import { interval } from 'rxjs';

@OnDestroyListener()
class MyComponent {

  public constructor() {
    interval(100).pipe(
      takeUntilDestroy(this), // this observable will be unsubscribed automatically on component destruction
    ).subscribe();
  }
}

Error handling

NgxErrorHandlerModule provides a robust error handling mechanism to handle error through your Angular app.

First, import NgxErrorHandlerModule in your root module :

import { provideErrorHandler } from '@paddls/ngx-common';

@NgModule({
  providers: [
    provideErrorHandler([
      MyErrorHandler
    ]),
  ]
})
export class AppModule {
}

You can register a list of error handlers in the forRoot method of the module.

Here is an example of an error handler :

@Injectable()
export class DefaultHttpErrorHandler implements ErrorHandler {

  public handle(err: any): Observable<any> {
    // DO SOMETHING

    return throwError(err);
  }

  public canHandle(err: any): boolean {
    return true; // Filter errors
  }
}

You can specify as many handlers as you want. handle() methods will be called in order each time canHandle() method returns true.

To handle any RxJS error, simply add the handleError() operator to your Observable :

source$.pipe(
  handleError()
).subscribe()

Configuration provider

NgxConfigModule provides a wrapper to inject any app config retrieved by HTTP into your app. To start, simply import NgxConfigModule in your root module :

import { NgxConfigModule } from '@paddls/ngx-common';

@NgModule({
  imports: [
    NgxConfigModule.forRoot('https://my-config-url.com'),
  ]
})
export class AppModule {
}

Then, each time you need your app config through your app, inject NgxConfigService :

import { NgxConfigService } from '@paddls/ngx-common';

@Injectable()
export class MyService {

  public constructor(configService: NgxConfigService) {
    configService.getConfig('key').subscribe(console.log);
    
    console.log(configService.getConfigSnapshot('key'));
  }

}

Local storage service

NgxLocalStorageModule provides a wrapper to localStorage API that injects values into RxJS hot observables each time a value is updated into the storage. To start, simply import NgxLocalStorageModule in your root module :

import { NgxLocalStorageModule } from '@paddls/ngx-common';

@NgModule({
  imports: [
    NgxLocalStorageModule.forRoot(),
  ]
})
export class AppModule {
}

Then, use it like this :

import { NgxLocalStorageService } from '@paddls/ngx-common';

@Injectable()
export class MyService {

  public constructor(localStorageService: NgxLocalStorageService) {
    localStorageService.get('key').subscribe(console.log); // 'value'
    
    localStorageService.set('key', 'value').subscribe(console.log); // 'value'
    
    localStorageService.remove('key');
    
    localStorageService.clear();
  }

}

@Log

Decorator @Log allows you to debug method without modifying internal code.

Usage:

import { Log } from '@paddls/ngx-common';
import { environment } from '../../environment.ts';

class MyClass {

  @Log()
  public myMethod(): any {

  }

  @Log(!environment.production) // the log should be disabled on production
  public myMethod(): any {

  }

  @Log(true, 'red') // override default log color
  public myMethod(): any {

  }
}

new MyClass().myMethod();
// => should log duration, class, method, args and returned value