Learn About Angular Component Hook Life Cycle

• app.component.ts

  import { Component, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
    title = 'app';
    usertext: string = "";
    ngOnInit() {
      console.log('ngOnInit called');
    }
    ngDoCheck() {
      console.log('ngDoCheck called');
    }
    ngAfterContentInit() {
      console.log('ngAfterContentInit called');
    }
    ngAfterContentChecked() {
      console.log('ngAfterContentChecked called');
    }
    ngAfterViewInit() {
      console.log('ngAfterViewInit called');
    }
    ngAfterViewChecked() {
      console.log('ngAfterViewChecked called');
    }
    ngOnDestroy() {
      console.log('ngOnDestroy called');
    }
  }

• app.component.html

  <div>
    <h2>Angular Compoent Hook LifeCycle :</h2>
  </div>
  <table style="border:1">
    <tr>
      <td>
        <h3>Parent value</h3>
      </td>
      <td>
        <input type="text" [(ngModel)]="usertext" />
      </td>
    </tr>
    <tr>
      <td>
        <h3>Child value</h3>
      </td>
      <td>
        <app-child [changedata]="usertext"></app-child>
      </td>
    </tr>
  </table>
  

• app.child.component.ts

  import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
  @Component({
      selector: 'app-child',
      template: ` {{changedata}} `
  })
  export class ChildComponent implements OnChanges {
      @Input() changedata: string;
      ngOnChanges(changes: SimpleChanges) {
          for (let name_prop in changes) {
              let change = changes[name_prop];
              let current_value = JSON.stringify(change.currentValue);
              let previous_value = JSON.stringify(change.previousValue);
              console.log("ngOnChange is called");
              console.log("Current value is:" + current_value);
              console.log("Previous value is:" + previous_value);
          }
      }
  }
  

According to the above, we have app.component.ts and app.component.html files which I am using for the parent component and showing all the component hook life cycles.

For ngOnChange I have added an app.child.component.ts file with html which I am using for data bound property of input.

As you know first we will execute the ng serve command in the Angular CLI command window If the application is compiled successfully then you can run the application in the browser by localhost:4200 which we will use for showing the application output.

As you can see above I have added console.log for showing the exact life cycle steps. When the application runs successfully, the console window shows the below output with localhost:4200.

The above images show the lifecycle of the component hook with steps. As you can see above when the application runs successfully, the console windows show the step-by-step lifecycle hook. We can get the current value and previous value of the input with the help of the ngOnChanges hook and SimpleChanges object which get the current and previous values. First, it shows the current value is empty because the input text is blank and the previous value is undefined because we don't have the previous value at the start of the application.

Now when I enter the ‘t’ character in the input box, the ngOnChanges hook is again called and shows the current and previous values. The current value is t and the previous value is “” empty. So we can say, we can get all instances of input value when the data-bound property changes with the help of the ngOnChanges hook.

I hope you liked this -- please share it if you did. I will define the Angular Component Lifecycle Hook in my later tutorial.