Angular 9 Tutorial - 20 - Component Life Cycle in Angular

? Subscribe for more angular videos with live examples
http://www.youtube.com/channel/UC-FyE8pmbzUw7sb293FOdlA?sub_confirmation=1

You can find the code in git-hub:
https://github.com/sadupawan1990/Angular

In this video we will discuss about component lifecycle in Angular. Let us understand this with example.

Angular executes the lifecycle hooks after executing the component constructor.

below is the sequence of execution

ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

Code :

lifecycle.component.ts

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

@Component({
selector: 'app-lifecycle',
templateUrl: './lifecycle.component.html',
styleUrls: ['./lifecycle.component.css']
})
export class LifecycleComponent {

@Input() inputValue : string;
contentLength : string;

constructor() {
console.log('Constructor');
}

ngOnInit(): void {
}

ngOnChanges(changes : SimpleChanges): void {
console.log('NgOnChanges');
console.log(changes);
if(this.inputValue && this.inputValue.length ) 5){
this.contentLength = 'long';
}else{
this.contentLength = 'short';
}
}

}

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
inputText : string;

resetEmployees(eventData){
this.empList = eventData;
}
}

app.component.html

input type="text" [(ngModel)]="inputText" /

app-lifecycle [inputValue] = "inputText" /app-lifecycle

lifecycle.component.html

p lifecycle works! /p
h2
{{inputValue}}
/h2
h2
Text Length is - {{contentLength}}
/h2

Search Tags
component life cycle in angular | component lifecycle hooks | component life cycle in angular 7 | angular component lifecycle hooks | angular component lifecycle hooks with example | angular component lifecycle | angular lifecycle hooks | angular life cycle | angular lifecycle hooks explained | angular life cycle interview questions | ngonchanges lifecycle hook example | ngonchanges is not working | ngonchanges angular 9 | ngonchanges multiple input | ngonchanges vs setter | ngonchanges simplechange | ngonchanges() angular | angular ngonchanges | angular | angular tutorial | angular ngOnchanges example | angular tutorial for beginners |