Summary 8 lifecycle hooks of Component in Angular

8 lifecycle hooks of
components in
Angular
A Complete guidance with understandable examples




ImamHussain – (4 years of experience in Angular Development )

, Component's 8 lifecycle hooks in Angular

1. ngOnChanges:

The ngOnChanges hook is called when one or more of the
omponent's @Input properties change. It receives a SimpleChanges object
containing the previous and current values of the properties.

Parent Component:

1. import { Component } from '@angular/core';
2. @Component({
3. selector: 'app-root',
4. template: `
5. <h2>Parent Component</h2>
6. <input type="text" [(ngModel)]="parentValue" placeholder="Enter a
value">
7. <app-my-component
8. [inputValue]="parentValue"></app-my-component
9. >
10. `
11. })
12. export class ParentComponent {
13. parentValue: string;
14. }


Child Component:

1. import { Component, Input, OnChanges, SimpleChanges } from
'@angular/core';
2. @Component({
3. selector: 'app-my-component',
4. template: `<p>{{ message }}</p>`
5. })
6. export class MyComponent implements OnChanges{
7. @Input() inputValue: string;
8. message: string;
9. ngOnChanges(changes: SimpleChanges) {
10. if (changes.inputValue) {
11. this.message = 'Input value changed to: ' +
changes.inputValue.currentValue;
12. }
13. }
14. }