Angular Component Lifecycle Hooks

Go Back

Level : Intermediate

Go Back

Mentor: Shailendra Chauhan

Duration : 00:04:30

Get Details

ngOnChanges

This hook is triggered when the input properties of a component change.

Example

@Input() inputValue: string;
ngOnChanges(changes: SimpleChanges) {
  if (changes.inputValue) {
    console.log('Input value changed to:', changes.inputValue.currentValue);
  }
}

ngOnInit

This hook is called once after input values are set and is used for initializing data.

Example

ngOnInit() {
  this.initializeData();
}

ngOnDestroy

This hook is called before a component is destroyed, allowing for resource cleanup.

Example

ngOnDestroy() {
  this.unsubscribeFromObservable();
}

ngDoCheck

This hook is called during each change detection cycle and can be used to manually check for changes.

Example

ngDoCheck() {
  if (this.shouldUpdate) {
    this.updateData();
  }
}

ngAfterContentInit

This hook is triggered after content projection into the component's view.

Example

ngAfterContentInit() {
  console.log('Content projected and initialized');
}

ngAfterContentChecked

This hook is called after each change detection cycle to check content changes.

Example

ngAfterContentChecked() {
  console.log('Content checked for changes');
}

ngAfterViewInit

This hook is called when the component's view has been fully initialized.

Example

ngAfterViewInit() {
  console.log('View initialized');
}

ngAfterViewChecked

This hook is called after each change detection cycle for checking view changes.

Example

ngAfterViewChecked() {
  console.log('View checked for changes');
}

<input [val]="name">

Binds the value of the name property to the val property of the input element.

Example

<input [value]="name">

<div [attr.role]="myAriaRole">

Binds the value of the myAriaRole property to the role attribute of the <div> element.

Example

<div [attr.role]="myAriaRole">...</div>

<div [class.extra]="isADelight">

Binds the truthiness of the isADelight property to the presence of the CSS class extra on the <div> element.

Example

<div [class.extra]="isADelight">...</div>

<div [style.height.px]="myHeight">

Binds the value of the myHeight property to the height style property of the <div> element.

Example

<div [style.height.px]="myHeight">...</div>

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.