Angular:データバイディング

Angular(バージョン２以降)の勉強、その９です
tyepscriptの変数をhtmlのテンプレートというかHMTLに反映させる
講義ではデータバイディングみたいに記載してあった

TypeScript側（/app/server/server.component.ts）

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html'
})
export class ServerComponent {
  serverId: number = 10;
  serverStatus: string = 'offline';
  getServerStatus (){
    return this.serverStatus;
  }
}

解説

template側（/app/server/server.component.html）

<p>
  {{ 'server'}}
  ID:{{ serverId }} is {{ getServerStatus() }}
</p>

解説

結果

単純な変数を出力などはできるようになった
基礎っぽいけど大事

次はプロパティーのディバイディングになります
masalib.hatenablog.com

Angular 2: From Theory To Practice (English Edition)

Beginning Angular 2 with Typescript (English Edition)