Answer»
Angular apps are made up of pieces. There are pieces in an Angular app that are tree-structured, and pieces that consist of more pieces. An Angular app is made up of components, which is a tree of components. A component is a template, a typescript class, and a stylesheet file. Angular components have a lifecycle that is administered by Angular. The Angular lifecycle hooks provide fine-grained control of Angular by capturing different phases of birth to death. You can see how Angular phases change in certain portions of its lifecycle. Here's how you can control the phases of Angular using Angular lifecycle hooks.
| Hook | Significance |
|---|
| ngOnChanges | The content is processed or child views are loaded before this hook is executed. It is also executed when the input properties of the component change. | | ngOnInit | Data can be initialized in a component by calling this hook after input values are set. It is performed only once after input values are set. | | ngOnDestroy | You can use this hook to clean up memory and release resources and subscriptions after a component is destroyed. | | ngDoCheck | Any changes detected are handled using this hook. | | ngAfterContentInit | After performing content projection into the component's view, Angular invokes this hook before evaluating the expression. | | ngAfterContentChecked | Angular's change detection mechanism checks the content of all components once every time they are rendered, so this hook is called each time change is detected. | | ngAfterViewInit | When the component’s view has been fully initialized, this hook is called. | | ngAfterViewChecked | This hook is invoked after every check of the component's views and its child views. |
| Template Syntax | Details |
|---|
| <input [val]="name"> | Binds the “name” expression result to the property “val” | | <div [attr.role]="myAriaRole"> | An expression that binds an attribute role to a result of expression “myAriaRole”. | | <div [class.extra]="isADelight"> | The truthiness of the expression isADelight binds to the CSS class extra | | <div [style.height.px]="myHeight"> | The result of the expression myHeight binds to the style property height |
|
