フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

Angular2 for TypeScriptのお勉強-sample(11)【class,NgClassの使い方】

Angular2 for TypeScriptのお勉強-sample(11)【class,NgClassの使い方】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

チュートリアルでいうここを読んでます

class,NgClassの使い方

class="isSpecial"

[class.isSpecial]="isSpecial"

[ngClass]="isSpecial"の違いについて。
下の今回のコードを見て貰うと一目瞭然なのですが、
今回のコード

例えば

<div class="pl30  fs20 w100 block" >は通常のclass付与

<div class="pl30  fs20 w100 block" [class.primary]="isPrimary">

これはclass名primaryにisPrimaryがtrueの際付与されます。

この場合どうでしょうか

<div class="block" [class.block]="!isblock">

もしisblockがtrueを返して!でfalseになるとclass="block"の方は適応されません。

簡単にいうとclass=""属性という書き方は[class.something]という書き方に負けるということですね

NgClassは何に使えるのかというとチュートリアルを見ると、

複数のclassを管理するといいとのことです。

<div [ngClass]="setClass()">のようにすると、

componentの方のメソッド定義で

setClass(){
let classes = {
saveable: this.canSave,
modified: !this.isUnchaned,
special: this.isSpecial
}
}

のようにsaveable、modified、specialなど任意の数だけbooleanで制御できてこういう場合はtrueにして返す、みたいなことができるのですね、

classのtoggleなどは1つのclass、

先程の

<div  [class.block]="!isblock">

のような方法がgoodらしいです。

詳しくは

今回のコード

のapp.childComponent.tsとapp.childComponent.htmlの関係性を見て頂ければ〜

今日はclassでしたー

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事