【Angular】クラス名を制御しよう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はクラス名を制御する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

クラス名の制御ができる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
1. 実行環境
クラス名を制御しよう！
1. クラス名を制御する構文
実際に作ってみよう！
まとめ

作りたいもの

特定の条件を満たした場合のみ、クラス名を付与する処理を作ります。

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

クラス名を制御しよう！

クラス名を制御する構文

<div [class.クラス名]="条件式">　</div>

条件式がtrueの場合のみクラス名が付与されるよ！

実際に作ってみよう！

app.component.html

<p [class.my-class]="user == 'サメハック'">こんにちは、サメハックです！</p>

user==’サメハック’を満たす場合のみmy-classが付与されるよ！

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  user: string = 'サメハック';
}

app.component.css

.my-class {
  color: yellow;
  background-color: black;
}

動作確認！

npm start

ng serve -o

として実行すると、my-classが適用されていることがわかります。

試しにuserの値を変えてみると、my-classが適用されなくなることがわかります。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  user: string = 'いぬハック';
}

まとめ

[class.クラス名]=”条件式”
とすることで、クラスを制御できる

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram