Component Angular 2

In Angular 2, “everything is a component.”

In Component we define the behavior of custom dom element.

A Component consists of the following −

Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives.

Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript.

Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.

Component is also a type of directive with template,styles and logic part.

Basically there are three types of directives in angular2 according to documentation.

Component
Structural directives
Attribute directives

Example

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

@Component({
  selector: 'my-component',
  template: `
   

Hello my name is {{name}}.

     
   

   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Max'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}