Post
Ask Question

Understanding Component In Angular 2

Introduction

The component is class with the template, which deals with the View of Application and it’s containing the core logic of  the page. We can compare it with the Controller in Angular 1.x. We need to write the Application logic inside the class, which is used by the View. The component class interacts with the View through Methods and Properties of API.

Angular 1.x concept such as directives, controllers and scope are combined into component. In other words we can say, component refers to directives, which are always associated with the template directly.

Component Lifecycle

Angular is a managed component lifecycle by itself. Angular is able to create and render the component. It also renders the component children and also updates the data, when associated model is changed and Angular destroys the component before removing from the DOM.

Angular component lifecycle hooks provide us visibility into the important moments and we can do some custom activity, when they are raised. Angular will call lifecycle hook only if it is defined.

Following are life cycle sequence for the directive and component.

Name of event (hook) Applicable to directive/ component/ both Description
ngOnChanges both It occurrs, when Angular sets the data bound property. Here, we can get the current and previous value of the changed object. It is raised before the initialization of an event for the component/ directive.
ngOnInit both It occurrs after Angular initializes the data-bound input properties.
ngDoCheck both It is raised every time, when Angular detects any change.
ngAfterContentInit Component only It is raised after projecting the external content into the component.
ngAfterContentChecked Component only After the content initialization, Angular checks the bindings of the external component which is used in to view at this time this event is raised.
ngAfterViewInit Component only This event is raised after Angular creates the view defined by the component.
ngAfterViewChecked Component only This event is raised after Angular checks the bindings of the view(s) defined by the component.
ngOnDestroy both It is used for the cleanup purpose and it is raised just before Angular destroys the directive / component. It is very much important in the memory leak issue by Unsubscribe observables and detach the event handlers

flow

Example

In this example, I have declared all the life cycle events for the component as following. In all the events, I have just written down the name of the event in the console, using “console.log” JavaScript function.

Component file 

  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'test-app',  
  6.     template: '<h1>This is my Angular 2 Application</h1>' + '<br/>' + '<other-comp>loading...</other-comp>'  
  7. })  
  8. export class AppComponent {  
  9.     ngOnChanges() {  
  10.         console.log('ngOnChanges');  
  11.     }  
  12.     ngOnInit() {  
  13.         console.log('ngOnInit');  
  14.     }  
  15.     ngDoCheck() {  
  16.         console.log('ngDoCheck');  
  17.     }  
  18.     ngAfterContentInit() {  
  19.         console.log('ngAfterContentInit');  
  20.     }  
  21.     ngAfterContentChecked() {  
  22.         console.log('ngAfterContentChecked');  
  23.     }  
  24.     ngAfterViewInit() {  
  25.         console.log('ngAfterViewInit');  
  26.     }  
  27.     ngAfterViewChecked() {  
  28.         console.log('ngAfterViewChecked');  
  29.     }  
  30.     ngOnDestroy() {  
  31.         console.log('ngOnDestroy');  
  32.     }  
  33. }  
When we run the Application, using "npm start" command, the component is rendered by the Angular and also Angular executes the implemented event sequentially.

output

As we have seen here, the "ngOnDestroy" event is not executed by Angular because Angular will call this event, when it is going to destroy the component. Normally page component will destroy when navigation change.

Component Vs Directive

Component is look like the directive. Same as directive, component is also contains template and business logic. Following is different between component and directive.
 
Component Directive
Component is a directive that used to shadow DOM to create encapsulates visual behavior. It is used to create UI widgets. Directive is used to create behavior to an existing DOM element.
Component is helpful to break up our Application to smaller component Directive is help us to create re-usable components
Pipes can be define by component We cannot create pipes using directive
We can present only one component per DOM element We can define many directive per DOM element
@component keyword is used to define metadata @directive keyword is used to define metadata

Summary

Angular Component is class with the template, which deals with View of the Application and also contains the business logic. It is very useful to divide our Application to smaller parts.


Similar Articles