読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Angular:データバイディング

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



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;
  }
}

解説
f:id:masalib:20170505153523p:plain

template側(/app/server/server.component.html)

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

解説

f:id:masalib:20170505153541p:plain


結果

f:id:masalib:20170505153603j:plain


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

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