masalibの日記

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

Angular:ngStyle

f:id:masalib:20170508134339j:plain
Angular(バージョン2以降)の勉強、その14です
styleを指定することで切り替えれる機能です

ngIfみたいにhtmlを触れるディレクティブを勉強します

今回はランダムで切り替えるようにしているのですが
今後は、行数やステータスで切り替わるようにできるみたい
listの処理でよく使うと思うので覚えたいと思います

公式のreferenceはこちら
https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html

TypeScript側(/app/server/server.component.ts)親子関係の子の部分です

export class ServerComponent {
  serverId: number = 10;
  serverStatus: string = 'offline';

  constructor() {
    this.serverStatus  = Math.random() > 0.5 ? 'online' : 'offline';
  }
  getServerStatus (){
    return this.serverStatus;
  }
}

serverStatusという変数をランダムで
onlineとofflineに切り替わるようにする

f:id:masalib:20170507190310p:plain

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

listが切り替わるようにhtml側にngstyleを設定します

<p [ngstyle]="{backgroundColor:getColor()}">
  {{ 'server'}}
  {{getColor()}}
  ID:{{ serverId }} is {{ getServerStatus() }}
</p>

ngstyleでstyleのバックグラウンドカラーを指定しています

f:id:masalib:20170507190349p:plain

結果

f:id:masalib:20170507190414p:plain


行単位で切り替わることができた
行のスタイルや内容によって切り替えることができるみたい

Angular 2: From Theory To Practice (English Edition)

Angular 2: From Theory To Practice (English Edition)


14記事も書いて気がついたけど
はてな表記のソースがtypescriptに対応していた
あう・・・全部修正だよ

あとアイキャッチ画像をまともに作るようにしました
次の記事で忘れないように記載します