Angular Lifecycle Hooks - Part23

Опубликовано: 28 Август 2019
на канале: Code With Rohini

This video is about Angular Lifecycle Hooks.
To learn Angular2 from scratch and for beginners Please see the link below:
• What is AngularJS and What is Angular...
Watch More Videos On: / @codewithrohini1636 .
#Angular2 #LifecycleHooks #ngOnchanges #ngOnDestroy

please read in detail about the angular lifecycle hooks on the below link:
https://angular.io/guide/lifecycle-hooks

Lifecycle Hooks
Every component has a lifecycle managed by Angular.

Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing it from the DOM.

Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.

A directive has the same set of lifecycle hooks.

Component lifecycle hooks overview
Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. Developers can tap into key moments in that lifecycle by implementing one or more of the lifecycle hook interfaces in the Angular core library.

Each interface has a single hook method whose name is the interface name prefixed with ng. For example, the OnInit interface has a hook method named ngOnInit() that Angular calls shortly after creating the component.
Lifecycle sequence
After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

ngOnChanges() -
Executes, every time the value of an input property changes. The hook method receives a SimpleChanges object containing current and previous property values. This is called before ngOnInit.

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.
Called once, after the first ngOnChanges().

ngDoCheck()
Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit()
Respond after Angular projects external content into the component's view / the view that a directive is in.
Called once after the first ngDoCheck().

ngAfterContentChecked()
Respond after Angular checks the content projected into the directive/component.
Called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit()
Respond after Angular initializes the component's views and child views / the view that a directive is in.
Called once after the first ngAfterContentChecked().

ngAfterViewChecked()
Respond after Angular checks the component's views and child views / the view that a directive is in.
Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().

ngOnDestroy()
Executes just before angular destroys the component and generally used for performing the cleanup.
Example:

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

@Component({
selector: 'app-simple',
template: `
[p] You Entered: {{simpleInput}}[/p]
`,
styles: []
})
export class SimpleComponent implements OnChanges {
@Input()
simpleInput: string;

ngOnChanges(changes: SimpleChanges) {
// tslint:disable-next-line:forin
for (let propertyName in changes) {
let change = changes[propertyName];
let current = JSON.stringify(change.currentValue);
let previous = JSON.stringify(change.previousValue);

console.log('ngOnChanges Hook method is called');
console.log(propertyName + ':currentValue= ' + current + ', previousValue= ' + previous);
}
}
}

Смотрите видео Angular Lifecycle Hooks - Part23 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Code With Rohini 28 Август 2019. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 97 раз и оно понравилось 8 посетителям.

131