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)親子関係の子の部分です
- template側(/app/server/server.component.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に切り替わるようにする
template側(/app/server/server.component.html)
listが切り替わるようにhtml側にngstyleを設定します
<p [ngstyle]="{backgroundColor:getColor()}"> {{ 'server'}} {{getColor()}} ID:{{ serverId }} is {{ getServerStatus() }} </p>
ngstyleでstyleのバックグラウンドカラーを指定しています
結果
行単位で切り替わることができた
行のスタイルや内容によって切り替えることができるみたい
Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング
- 作者: 末次章
- 出版社/メーカー: 日経BP社
- 発売日: 2017/01/18
- メディア: 単行本
- この商品を含むブログ (1件) を見る
Angular 2: From Theory To Practice (English Edition)
- 作者: Asim Hussain
- 出版社/メーカー: CodeCraft
- 発売日: 2017/01/14
- メディア: Kindle版
- この商品を含むブログを見る
14記事も書いて気がついたけど
はてな表記のソースがtypescriptに対応していた
あう・・・全部修正だよ
あとアイキャッチ画像をまともに作るようにしました
次の記事で忘れないように記載します