Suggest improvements

Components

In Angular 2, “everything is a component.” Components are the main way we build and specify elements and logic on the page, through both custom elements and attributes that add functionality to our existing components.

A simple component

Here’s a simple Component that renders our name, and a button that triggers a method to print our name to the console:

app.component.ts

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}.
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Max'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

When we use the <my-component></my-component> tag in our HTML, this component will be created, our constructor called, and rendered.