Component Lifecyles of an Angular application demo Angular page for full documentation:
Example which shows the call order of lifecyle hooks by creating and destroying a child component. One can see the corresponding order by creating and destroying the child component:
- Constructor call
- On Changes call
- OnInit call
- DoCheck call
- AfterContentInit call
- AfterContentChecked call
- AfterViewInit call
- AfterViewChecked call
- DoCheck call
- AfterContentChecked call
- AfterViewChecked call
- OnDestroy call
Demonstrates how hooks can be integrated in simple directives. The example implement a directive in a
tag so that one can see the OnInit and OnDestroy calls, if the
tag is created or destroyed.
Shows how one can track changes in input attributes with the OnChanges hook. One should always consider that when the input parameter is an object, than the object change is tracked, but not the change of its properties. Current and previous values can be queried.
Shows how to implement the DoCheck hook with which one can create custom checks. The example shows to track properties of an object input attribute of a component. One should consider that this hook can be expensive when building real world applications.
This shows how to implement the AfterViewInit and ngAfterViewChecked which must be implemented if you want to invert the dataflow from parent to child to child to parent component. Thus the parent can track changes in child components. This hooks are called after Angular creates its corresponding child views of the parent component.
The main purpose of the following hooks is to provide content projection, i.o.w. to import HTML content from outside the component and insert it inside. The example is similarly the AfterView example. These hooks are AfterContentInit and AfterContentChecked. The <ng-content> directive is used as placeholder for the provided content. Similarly the parent component can track changes of child components.
A Counter uses the ngOnChanges() method to log a change every time the parent component increments its input counter property. The child component uses the appSpy directive to write messages in the logger instance during the OnInit and OnDestroy hooks. The parent component represents a view for the logs.
The LoggerService.tick_then() statement postpones the log update for one turn of the browser's JavaScript cycle, which triggers a new change-detection cycle.
ng serve