- Components
Metadata
- Cycle Hooks
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
- ngOnDestroy
Description
- Components are the most basic UI building block of an Angular app.
- An Angular app contains a tree of Angular components.
- Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated for a given element in a template.
- A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
Components are a logical piece of code for Angular JS application. A Component consists of the following-
Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives.
Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript.
Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.
@Component ({
selector: 'my-app',
template: ` <div><h1>{{appTitle}}</h1><div>To Tutorials Point</div> </div> `,
})
|
Option |
Description |
|
The change-detection strategy to use for this component. |
|
|
Defines the set of injectable objects that are visible to its view DOM children. See example. |
|
|
The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the __moduleName variable within each module. In CommonJS, this can be set to module.id. |
|
|
The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using template. |
|
|
An inline template for an Angular component. If provided, do not supply a template file using templateUrl. |
|
|
One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component. |
|
|
One or more inline CSS stylesheets to use in this component. |
|
|
One or more animation trigger() calls, containing state() and transition() definitions. See the Animations guide and animations API documentation. |
|
|
An encapsulation policy for the template and CSS styles. One of: |
|
|
Overrides the default interpolation start and end delimiters ({{ and }}). |
|
|
A set of components that should be compiled along with this component. For each component listed here, Angular creates a ComponentFactory and stores it in the ComponentFactoryResolver. |
|
|
True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the \s character class in JavaScript regular expressions. Default is false, unless overridden in compiler options. |
Following is a description of each lifecycle hook.
ngOnChanges − When the value of a data bound property changes, then this method is called.
ngOnInit − This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
ngDoCheck − This is for the detection and to act on changes that Angular can't or won't detect on its own.
ngAfterContentInit − This is called in response after Angular projects external content into the component's view.
ngAfterContentChecked − This is called in response after Angular checks the content projected into the component.
ngAfterViewInit − This is called in response after Angular initializes the component's views and child views.
ngAfterViewChecked − This is called in response after Angular checks the component's views and child views.
ngOnDestroy − This is the cleanup phase just before Angular destroys the directive/component.
ngOnChanges – This event executes every time when a value of an input control within the component has been changed. Actually, this event is fired first when a value of a bound property has been changed. It always receives a change data map, containing the current and previous value of the bound property wrapped in a SimpleChange.
import { Component, OnChanges } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements OnChanges{
constructor() {}
ngOnChange() {
// console.log(“ print on change detections”)
}
}
ngOnInit – This event initializes after Angular first displays the data-bound properties or when the component has been initialized. This event is basically called only after the ngOnChanges()events. This event is mainly used for the initialize data in a component.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit() {
// console.log(“ print on ngOnInit”)
}
}
ngDoCheck – This event is triggered every time the input properties of a component are checked. We can use this hook method to implement the check with our own logic check. Basically, this method allows us to implement our own custom change detection logic or algorithm for any component.
import { Component, DoCheck} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements DoCheck{
constructor() {}
ngDoCheck() {
// console.log(“ ngDoCheck”)
}
}
ngAfterContentInit – This lifecycle method is executed when Angular performs any content projection within the component views. This method executes when all the bindings of the component need to be checked for the first time. This event executes just after the ngDoCheck() method. This method is basically linked with the child component initializations.
import { Component, AfterContentInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements AfterContentInit {
constructor() {}
ngAfterContentInit () {
// console.log(“ngAfterContentInit ”)
}
}
ngAfterContentChecked – This lifecycle hook method executes every time the content of the component has been checked by the change detection mechanism of Angular. This method is called after the ngAfterContentInit() method. This method is also called on every subsequent execution of ngDoCheck(). This method is also mainly linked with the child component initializations.
import { Component, AfterContentChecked } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements AfterContentChecked {
constructor() {}
ngAfterContentChecked () {
// console.log(“ngAfterContentChecked ”)
}
}
ngAfterViewInit – This lifecycle hook method executes when the component’s view has been fully initialized. This method is initialized after Angular initializes the component’s view and child views. It is called after ngAfterContentChecked(). This lifecycle hook method only applies to components.
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements AfterViewInit {
constructor() {}
ngAfterViewInit () {
// console.log(“ngAfterViewInit ”)
}
}
ngAfterViewChecked – This method is called after the ngAterViewInit() method. It is executed every time the view of the given component has been checked by the change detection algorithm of Angular. This method executes after every subsequent execution of the ngAfterContentChecked(). This method also executes when any binding of the children directives has been changed. So this method is very useful when the component waits for some value which is coming from its child components.
import { Component, AfterViewChecked } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements AfterViewChecked {
constructor() {}
ngAfterViewChecked () {
// console.log(“ngAfterViewChecked ”)
}
}
ngOnDestroy – This method will be executed just before Angular destroys the components. This method is very useful for unsubscribing from the observables and detaching the event handlers to avoid memory leaks. Actually, it is called just before the instance of the component is finally destroyed. This method is called just before the component is removed from the DOM.
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html‘,
styleUrl: ‘ ./app.component.css’
})
export class AppComponent implements OnDestroy {
constructor() {}
ngOnDestroy() {
console.log('Component Destroy');
}
}
