失恋ソングアプリ見本

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

class Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <label>曲名: <input type="text" [(ngModel)]="songTitle"></label>
    <label>歌手名: <input type="text" [(ngModel)]="artistName"></label>
    <button (click)="send(songTitle, artistName)">追加</button>

    <ul>
      <li *ngFor="let song of songList">{{song.title}} ({{song.artist}})</li>
    </ul>
  `
})
export class AppComponent {
  public title = '失恋ソング';
  result: string;

  songListRef = (<any>window).firebaseApp.database().ref('songList');
  songList: {title: string; artist: string}[];

  ngOnInit() {
    this.songListRef.on('value', (dataSnapshot) => {
      const rawObject = dataSnapshot.val();
      this.songList = Object.keys(rawObject).map((key) => {
        return rawObject[key];
      });
    });
  }

  send(songTitle: string, artistName: string) {
    if (!songTitle || !artistName) {
      alert('曲名とアーティスト名を入力してください。');
      return;
    }

    const newSongRef = this.songListRef.push();
    newSongRef.set({
      title: songTitle,
      artist: artistName
    });
    this.songTitle = '';
    this.artistName = '';
  }
}