doc: explain how to use the generics to have ngOnChanges type safe

Author: maxime1992

README.md

@@ -94,7 +94,8 @@ import { getObservableLifecycle } from 'ngx-observable-lifecycle';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChildComponent {
-  @Input() input: number | undefined | null;
+  @Input() input1: number | undefined | null;
+  @Input() input2: string | undefined | null;
 
   constructor() {
     const {
@@ -106,16 +107,32 @@ export class ChildComponent {
       ngAfterViewInit,
       ngAfterViewChecked,
       ngOnDestroy,
-    } = getObservableLifecycle(this);
+    } =
+      // 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);
 
-    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'));
+
+    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 accordingly
+
+      changes.input1?.currentValue; // `number | null | undefined`
+      changes.input1?.previousValue; // `number | null | undefined`
+
+      changes.input2?.currentValue; // `string | null | undefined`
+      changes.input2?.previousValue; // `string | null | undefined`
+    });
   }
 }
 

src/app/child/child.component.ts

@@ -7,7 +7,8 @@ import { getObservableLifecycle } from 'ngx-observable-lifecycle';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChildComponent {
-  @Input() input: number | undefined | null;
+  @Input() input1: number | undefined | null;
+  @Input() input2: string | undefined | null;
 
   constructor() {
     const {
@@ -19,15 +20,31 @@ export class ChildComponent {
       ngAfterViewInit,
       ngAfterViewChecked,
       ngOnDestroy,
-    } = getObservableLifecycle(this);
+    } =
+      // 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);
 
-    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'));
+
+    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 accordingly
+
+      changes.input1?.currentValue; // `number | null | undefined`
+      changes.input1?.previousValue; // `number | null | undefined`
+
+      changes.input2?.currentValue; // `string | null | undefined`
+      changes.input2?.previousValue; // `string | null | undefined`
+    });
   }
 }