This is the second tutorial in continuation to our AngularJS 2 tutorial series.Incase if you have not read the first tutorial ,please follow this link:

http://findnerd.com/account/#url=/list/view/Configuration-files-for-AngularJS-2-/24056/

Till now,Our project has got only one single Component namely app.component.ts within app/ts/ folder.

A Component is a basic building-block of any AngularJS application.It is simply "a part our web page". A web page may consists of any number of components,each having some special role to play in displaying of the web page.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Angular 2 Template </h1>'
})

export class AppComponent {}

Here,Import statement imports Component package from angular2/core,a package that already has been installed,see the sub folders of node_modules folder,when we invoked npm install command.

@Component is an Angular 2 decorator which specifies that the class AppComponent isn't just a simply typescript class ,but is a Component as well .This decorator allows us to associate metadata with the Component class.

The selector of a Component is simply a tag-name i.e. my-app can be used as an HTML tag within an HTML page.

The template metadata of a Component simply specifies what data this component is going to place in its specific position in the HTML page.So quite understandably ,it has some HTML code as value.

The export keyword specifies that This Component is public i.e. it can be used anywhere within our project.

In actual projects ,we will be dealing with Component classes having variables defined inside them  and further nested Components so as to make a bigger Component.

Thank you.