Suggest improvements


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:


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

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

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