Angular Component LifeCycle

Angular Component LifeCycle: Pass data from parent to child with input binding
In an Angular, the component has life cycle manage by Angular.  Where you can place custom code to handle various events (component create,  start, run, and so forth). Angular create the component

  • Angular create the component
  • Renders the component
  • Creates and renders the component children
  • Checks when the component data-bound properties change and
  • Destroys the component before removing it from the DOM

To tap into and react when these lifecycle events occur, angular offers several lifecycle hooks. The Lifecycle Hook interfaces are defined in the @angular/core library. 

Out of these, three most common hooks used in the angular component life cycle are,

  1. ngOnChanges() Executes, every time the value of an input property changes. The hook method receives a SimpleChanges object containing current and previous property values.  Called before ngOnInit() and whenever one or more data-bound input properties change.
  2. ngOnInit ()
    Executes after the constructor and after ngOnChange hook for the first time. It is most commonly used for component initialization and retrieving data from a database.
  3. ngOnDestroy() Executes just before angular destroys the component and generally used for performing cleanup.

We will learn simple example of using ngOnChanges lifecycle hook ngOnChanges is called every time the value of an input property of the component changes. So first let’s create a Simple Component with an input property. Our example has input text box, as soon as a user starts typing in the text box, we want to capture the current and previous value and log it on browser console.

We have to follow certain steps to achieve our task.

Step 1: Create a simple component in app/simple.component.ts

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'simple',
  template: `You entered : {{simpleInput}}`
})
export class SimpleComponent implements OnChanges {
  @Input() simpleInput: string;

  constructor(){}

  ngOnChanges(changes : SimpleChanges){
    for (let propertyName in changes){
      let change = changes[propertyName];
      let current = JSON.stringify(change.currentValue);
      let previous = JSON.stringify(change.previousValue);
      console.log(propertyName + ': currentValue = ' +current + ', previousValue =' + previous);
    }
  }
}

Angular supports the @Input and @Output annotations to pass values between components. The @Input annotation is for variables that receive values from a parent component, whereas the @Output annotation sends (or “emits”) data from a component to its parent component when the value of the given variable is modified.

“Inputs” specifies which properties you can set on a component from parent to child whereas “outputs” identifies the events a component can fire to send information up the hierarchy to its parent.

We have to import the Input decorate to simple to convert the variable simpleInput to input property.  OnChanges interface, SimpleChanges is the object provided by the angular framework that represents the basic change from a previous to a new value.

 

The simple input property with interpolation to display the value it receives from the parent component.
1. We have to implement OnChanges Life Cycle Hook interface Input property. As and when this property changes ngOnChanges lifecycle hook method is called @Input() simpleInput: string;

2. Implementation of the hook method This ngOnChanges(changes: SimpleChanges) code logs the current and previous value of input text to the console.

Step 2: Add the input text box in app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `Your Text : <input type='text' [(ngModel)]='userText'>
            <br/><br/>
            <simple [simpleInput]='userText'></simple>
            `
})
export class AppComponent {
  userText: string = 'Previous Value';

  constructor(){}
}

Note: There’s one directive in Angular >= 2 that implements two-way data binding: ngModel. Two-way data binding combines the input and output binding into a single notation using the ngModel directive.

We are binding the simple selector as a directive,  and bind it with simple input property of simple. component class to bind it with userText property of app component. Whatever the value we type in input userText value is updated to the userText property and we are then binding the value of the userText property to input property of the simple component input property simple input