【Angular】ngClassで三項演算子を使う

はじめに

AngularのngClass(テンプレート内でclass属性を動的に変更する機能)で三項演算子を使う方法を説明します。

<div class="block" [ngClass]="isRed ? 'red' : 'blue'"></div>

環境

• Angular: 8.2.14

実装

isRed が true の時は赤色になる

ngClassで三項演算子を使う方法について説明するために、isRedがtrueの時に赤色になり、isRedがfalseの時に青色になるプログラムを実装します。

まず、三項演算子を使わない書き方の例です。

app.component.scss

.block {
  border: solid 3px black;
  height: 200px;
  margin: 20px;
  width: 400px;

  &.red {
    background-color: red;
  }

  &.blue {
    background-color: blue;
  }
}

app.component.html

<div class="block" [ngClass]="{ red: isRed, blue: !isRed }"></div>

isRed が false の時は青色になる

続いて、三項演算子を使った場合の書き方の例です。

app.component.html

<div class="block" [ngClass]="isRed ? 'red' : 'blue'"></div>

三項演算子を使っていない場合と比較すると、{}で囲っていない、class名を''で囲っているといった違いがあります。

三項演算子を使うと条件文を一度書くだけで済むため、条件文が長い場合などは、三項演算子を使ったほうがすっきりします。

参考サイト

AngularのngClassで条件に応じてスタイルを切り替える(三項演算子) - Qiita