【Angular】[class]と[class.xxxx]の違い

おさらいも兼ねて

HTML上のスタイルを変更するにはstyle=にて直接スタイルを指定するパターンとclass=にてCSSに定義されたクラスを指定するやりかたがある。Angularでの[class]と[class.xxxx]は後者に該当し、また状態によりスタイルを変更したい場合に使用する。
逆に変化の無いclass指定は(普通のスタイル指定は)

となる

[class]について

書式:[class]=’stringの変数名’

[class]は[class]='変数名'で指定する変数名の中身はCSSで使用するクラス名となる。つまり何かしらの条件で変数の内容を変更する=スタイルの変更となる

初期値は空なのでスタイルは何も指定さ/れないが、どこかのclickイベントが発生した時、cssで宣言されている.redのスタイルが適用される。通常のスタイル指定と同じように複数を指定する事も可能

[class]は1つしか宣言できない

[class]は一つのタグ内で一つしか宣言できない。エラーは出ないが複数指定した場合は最後に宣言したものが有効となる。

classと[class]は一緒に宣言できない

classと[class]の同時宣言も最後が有効となるようだ

[class.xxxx]について

書式:[class.xxx]=’booleanの変数名またはbooleanを返す式’

[class.xxxx]のxxxx部分はCSSのクラス名を指定する。CSSにredクラスが宣言されている場合[class.red]となる、[class.red]=’true’の時だけredが有効となる。つまり、tureの場合、「指定したCSSのクラスが宣言」。falseの場合「無視される」状態となる。
[class.red]='”ABCD” === “ABCD”‘などbooleanを返す式もできる。

[class.xxxx]は複数指定しても大丈夫

プログラムのclassとCSSのclassがあるからごっちゃになるよなー。と思う今日このごろ

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告