ngx-observable-lifecycle
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    NgxObservableLifecycle

    npm version Build Status Commitizen friendly codecov License npm peer dependency version npm peer dependency version

    NPM

    Features

    • Easily develop library components that rely on the Angular component/directive lifecycle
    • Avoid bugs caused by forgetting to ensure that Angular hook interfaces are implemented
    • Multiple different libraries can share the same underlying hook design
    • Hooks are explicitly defined - only the hooks you declare an interest in are observed

    Purpose & Limitations

    This library fills the need for a simple way for library developers to be able to observe the lifecycle of an Angular component.

    Example

    Let's say we're building a simple library function that automatically unsubscribes from observables that were manually subscribed to within a component. We'll implement this as an RxJS operator that can be used as follows:

    // ./src/app/lib-example/lib-example.component.ts#L12-L12
    
    public timer$ = interval(500).pipe(automaticUnsubscribe(this));

    In order to create this operator, we can do the following:

    // ./src/app/lib-example/lib-example.ts#L1-L8
    
    import { getObservableLifecycle } from 'ngx-observable-lifecycle';
    import { Observable } from 'rxjs';
    import { takeUntil } from 'rxjs/operators';
    
    export function automaticUnsubscribe<T>(component): (source: Observable<T>) => Observable<T> {
      const { ngOnDestroy } = getObservableLifecycle(component);
      return (source: Observable<T>): Observable<T> => source.pipe(takeUntil(ngOnDestroy));
    }

    We call thegetObservableLifecycle function exported by ngx-observable-lifecycle and destructure the onDestroy observable. This observable is used with a takeUntil operator from rxjs which will automatically unsubscribe from the observable that it is piped on.

    And that's it! Developers can now simply decorate their component, and use the rxjs operator on any of the places they subscribe manually (i.e. calling .subscribe() ) to an observable:

    // ./src/app/lib-example/lib-example.component.ts
    
    import { ChangeDetectionStrategy, Component } from '@angular/core';
    import { interval } from 'rxjs';
    import { automaticUnsubscribe } from './lib-example';
    
    @Component({
      selector: 'app-lib-example',
      templateUrl: './lib-example.component.html',
      styleUrls: ['./lib-example.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class LibExampleComponent {
      public timer$ = interval(500).pipe(automaticUnsubscribe(this));
    
      constructor() {
        this.timer$.subscribe({
          next: v => console.log(`timer$ value is ${v}`),
          complete: () => console.log(`timer$ was completed!`),
        });
      }
    }

    Full API

    Here's an example component that hooks onto the full set of available hooks.

    // ./src/app/child/child.component.ts
    
    import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
    import { getObservableLifecycle } from 'ngx-observable-lifecycle';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class ChildComponent {
      @Input() input: number;
    
      constructor() {
        const {
          ngOnChanges,
          ngOnInit,
          ngDoCheck,
          ngAfterContentInit,
          ngAfterContentChecked,
          ngAfterViewInit,
          ngAfterViewChecked,
          ngOnDestroy,
        } = getObservableLifecycle(this);
    
        ngOnChanges.subscribe(() => console.count('onChanges'));
        ngOnInit.subscribe(() => console.count('onInit'));
        ngDoCheck.subscribe(() => console.count('doCheck'));
        ngAfterContentInit.subscribe(() => console.count('afterContentInit'));
        ngAfterContentChecked.subscribe(() => console.count('afterContentChecked'));
        ngAfterViewInit.subscribe(() => console.count('afterViewInit'));
        ngAfterViewChecked.subscribe(() => console.count('afterViewChecked'));
        ngOnDestroy.subscribe(() => console.count('onDestroy'));
      }
    }

    Note with in the above example, all observables complete when the component is destroyed.

    Keywords

    none

    Install

    npm i ngx-observable-lifecycle

    DownloadsWeekly Downloads

    291

    Version

    2.2.0

    License

    none

    Unpacked Size

    29.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • zakhenry