<span>Hello, my name is {{ user.firstName }}</span>

<input [value]="user.firstName">

<button [disabled]="isFormValid()">Save</button>

<a [href]="homeURL">Go to home</a>

<!-- custom component -->
<hero [data]="currentHero"></hero>

<button (click)="save()">Save</button>

<input
  [value]="user.firstName"
  (input)="user.firstName = $event.target.value">

<!-- custom component -->
<hero
  (deleted)="onHeroDeletedEvent($event)"></hero>

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'hero', // CSS selector
  templateUrl: './hero.component.html'
})
export class HeroComponent {
  @Input() data: Hero;
}

import { ..., Output, EventEmitter } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'hero',
  template: `<button (click)="deleted.emit(data)"></button>`
})
export class HeroComponent {
  @Input() data: Hero;
  @Output() deleted = new EventEmitter<Hero>();
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroComponent } from './hero/hero.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroComponent
  ],
  imports: [BrowserModule]
})
export class AppModule {}

import { HeroService } from './hero/hero.service';

@NgModule({ providers: [HeroService] })
export class AppModule {}

import { Component } from '@angular/core';
import { HeroService } from './hero.service';

@Component({ ... })
export class HeroComponent {
  constructor(private heroService: HeroService) {}
}

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Hero } from './hero';

@Injectable()
export class HeroService {
  constructor(private http: Http) {}

  fetchAll(): Observable<Hero[]> {
    return this.http.get('/api/heroes')
      .map((response: Response) => response.json());
  }
}

import { Component, OnInit } from '@angular/core';
import { HeroService } from './hero.service';
import { Hero } from './hero';

@Component({ ... })
export class AppComponent implements OnInit {
  heros: Hero[];

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    this.heroService.fetchAll()
      .subscribe(heroes => this.heros = heroes);
  }
}