What is components in Angular2?

A class with a template and a decorator/metadata is called component. Lets make it more clear.

Template – It render the view of the application, in other way we can say it defines the user interface which contains the HTML, directives and bindings.

Class – It is same like AngularJS Controller. Class contains actual business logic (code) template. It is like a class in any other OOPS language like Java or C#. The class consist of functions and properties.

Decorator – Template hold by decorator. Its associate template with component. Its helps to decorate the class with extra information.

Now explaining it with an example.

1.  Write a small piece of code to understand each point .

import {Component} from “@angular/core”
@Component({
selector:”kris-app1″,
template:`<h1>Hi {{name}}</h1>`
})
export class AppComponent{
name: string = “Krishnangshu Banerjee”;
}

2. Then from console run ng serve -o and browser will open automatically and the output will be –

3. Now I am detailing each points in pictorial form which I explained above –

Hope, it is clear to you. In next post i will discuss about “Angular 2 Template and TemplateURL” – https://indianjackofalltrade.com/template-templateurl-angular2/

2 Replies to “What is components in Angular2?”

Leave a Reply

Your email address will not be published. Required fields are marked *