Component in Angular.

What is a Component?

A component is the main building block of the Angular2 framework. Basically, component is the main process in which we can define or design the views including the logic. Its components perform all the responsibilities that are performed by controllers and directives. Also, we can say the Angular2 framework is a component-based framework. In the Angular2 application project, we can create any number of components and used them within a single HTML file. Component consists of Template, Class and Metadata.

@Component decorator basically decorated a typescript class as a component object. Basically, it is a function, which takes different types of parameters. In the @component decorator, we can set the values of different properties to finalize the behavior of the components.

Prosperities of Component

• Selector
• Template
• TemplateUrl
• ModuleId
• Styles or StylesUrls
• Providers
• viewProviders
• changeDetection
• animations
• encapsulation
• interpolation
• entryComponents
• preserveWhitespaces
• inputs
• outputs
• host
• exportAs
• queries

Example of Component

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  template: `<h1>Hello {{name}}</h1>`,

})

export class AppComponent  { name = 'Hello friends welcome in my angular program'; }

Life Cycles of the Component

• Constructor
• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentnit
• ngAfterContentChecked
• ngAfterViewInt
• ngAfterViewChecked
• ngOnDestroy