Read Angular 2.0 Introduction

Metadata

It is the way to tell Angular how to process a class.

I hope you have read About Components and Templates. There you must have seen @Component decorator.

It defines the metadata of the class which tells Angular how to process the class. So in Typescript, we attach metadata to tell Angular that it is a component not just a simple class.

@Component takes required configuration objects that tell Angular how to create and show / present the component and its view.

Few of them listed below:

selector: It is how we use it in our app. We define a custom tag here which is replaced by the Angular to show our component.
Example:
selector : ‘my-app’
In our Application HTML we are going to call it using

template: It is the view of the component
example :
template:
<div class = “jumbotron”>
<h1>Welcome to my First Angular 2 App!</h1>
</div>


( ) it is called backtag available on the left side of the key 1 of your keypad. It is ES6 for multiline string.

Note:
This template is the view, how this component looks. You can separate this code in a different file. (let us say app.component.html)

In this case you write templateUrl In place of just template and give its reference.
Like this templateUrl : './app/app.component.html'

styles:Any style want for the component’s HTML view.
Here also you can separate its code in other file(.css) and give reference.
Example:
styles: [
.jumbotron { box-shadow : 0 2px 0 rgba(0, 0, 0, 0.5); }
`]
or
styleUrls: [‘./app/app/component.css’]

providers: It is an array of services that are required by the component. So the angular knows that what services it have to inject in the component’s constructor.

Other popular metadata decorators are @Input, @output, @Injectable