Read Angular 2.0 Introduction

Components

Components are a part of the view which controls a patch of screen. Our Page can made of several components.

Component contains:

• @Component decorator : configure selectors, styles, template etc

( @Component decorator – Detail)

• A class : defines the app logic

Component have it’s application logic inside a class that supports the view. Example – the class can provides data to the view, create functions, variables etc.
And it also has a decorator @Component which contains the metadata of the class. It requires certain configuration details. See Metadata

Tip :
The component file have .ts extension. Like this – app.component.ts

Note :

• Angular Component decorator is available in @angular/core library
• You have to import it using javascript import statement. like this :

Import { Component } from ‘@angular/core’;

• Angular create, update and destroy components as user moves through the application. (See ngOnInit())

Example – app.component.ts

import { component } from '@angular/core'

@Component({
selector : 'my-app',
template:
<header>
<div>My Angular 2 App!</div>
</header>
<div class="jumbotron">
<h1>Welcome to our App</h1>
</div>
<footer class="text-center">
Copyright © 2017
</footer>

styles: [
.jumbotron { box-shadow : 0 2px 0 rgba(0, 0, 0, 0.5); }
]
})