- 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
This library fills the need for a simple way forlibrary developers to be able to observe the lifecycle of an Angularcomponent.
Let's say we're building a simple library function that automatically unsubscribes from observables that were manuallysubscribed 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#L11-L11publictimer$=interval(500).pipe(automaticUnsubscribe(this));
In order to create this operator, we can do the following:
// ./src/app/lib-example/lib-example.ts#L1-L8import{getObservableLifecycle}from'ngx-observable-lifecycle';import{Observable}from'rxjs';import{takeUntil}from'rxjs/operators';exportfunctionautomaticUnsubscribe<T>(component:any):(source:Observable<T>)=>Observable<T>{const{ ngOnDestroy}=getObservableLifecycle(component);return(source:Observable<T>):Observable<T>=>source.pipe(takeUntil(ngOnDestroy));}We call thegetObservableLifecycle function exported byngx-observable-lifecycle and destructure theonDestroyobservable. This observable is used with atakeUntil operator fromrxjs which will automatically unsubscribe fromthe 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 theysubscribe manually (i.e. calling.subscribe() ) to an observable:
// ./src/app/lib-example/lib-example.component.tsimport{ChangeDetectionStrategy,Component}from'@angular/core';import{interval}from'rxjs';import{automaticUnsubscribe}from'./lib-example';@Component({selector:'app-lib-example',templateUrl:'./lib-example.component.html',changeDetection:ChangeDetectionStrategy.OnPush,})exportclassLibExampleComponent{publictimer$=interval(500).pipe(automaticUnsubscribe(this));constructor(){this.timer$.subscribe({next:v=>console.log(`timer$ value is${v}`),complete:()=>console.log(`timer$ was completed!`),});}}Here's an example component that hooks onto the full set of available hooks.
// ./src/app/child/child.component.tsimport{ChangeDetectionStrategy,Component,Input,OnChanges}from'@angular/core';import{getObservableLifecycle}from'ngx-observable-lifecycle';@Component({selector:'app-child',templateUrl:'./child.component.html',changeDetection:ChangeDetectionStrategy.OnPush,})exportclassChildComponentimplementsOnChanges{ @Input()input1:number|undefined|null; @Input()input2:string|undefined|null;constructor(){const{ ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy,}=// specifying the generics is only needed if you intend to// use the `ngOnChanges` observable, this way you'll have// typed input values instead of just a `SimpleChange`getObservableLifecycle<ChildComponent,'input1'|'input2'>(this);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'));ngOnChanges.subscribe(changes=>{console.count('onChanges');// do note that we have a type safe object here for `changes`// with the inputs from our component and their associated values typed accordinglychanges.input1?.currentValue;// `number | null | undefined`changes.input1?.previousValue;// `number | null | undefined`changes.input2?.currentValue;// `string | null | undefined`changes.input2?.previousValue;// `string | null | undefined`});}// when using the ngOnChanges hook, you have to define the hook in your class even if it's empty// See https://stackoverflow.com/a/77930589/2398593 for more info// eslint-disable-next-line @angular-eslint/no-empty-lifecycle-methodpublicngOnChanges(){}}Note with in the above example, all observables complete when the component is destroyed.
