【Angular】Angularって何だろう（CSS編：コンポーネントCSS・ngClass・ngStyle）

1.はじめに

今回は、Angular記事最終回として、Angularの基本的な操作のうちCSS（スタイル設定）についてまとめていきます。
AngularではCSSをコンポーネント単位で管理できるため、他の画面へ影響を与えにくいという特徴があります。
今回は以下の内容を紹介します。

2.基本的な書き方

概要

Angular では、コンポーネントは以下のように構成されます。
htmlファイル・tsファイル・cssファイルの3ファイル構成になります。

app.component.html

<h1 [ngClass]="titleClass">{{ value }}</h1>
<button (click)="pushButton()">
  ボタンを押してください！
</button>

app.component.ts

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

@Component({
  selector: 'app-root', // HTMLタグの名前
  templateUrl: './app.component.html', // HTMLテンプレート
  styleUrls: ['./app.component.css'] // スタイルシート
})
export class AppComponent {
  value: string = '';
  titleClass: string = 'title';

  // ボタンをクリックしたときの処理
  pushButton() {
    this.value = 'ボタンが押されました！';
  }
}

app.component.css

// 今回はここに書くことをまとめていきます。
.title {
  color: red;
}

今回は下記の概念についてまとめていきます。

項目	説明
コンポーネントCSS	コンポーネント単位でスタイルを適用
ngClass	条件によってクラスを切り替える
ngStyle	条件によってスタイルを変更する

3.解説

①コンポーネントCSS

Angularでは、styleUrls に指定したCSSファイルの内容が、そのコンポーネントに対して適用されます。

＜基本的な書き方＞

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

＜テストコード＞

sample.component.ts

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {
}

sample.component.html

<h2>AngularのCSSテスト</h2>

sample.component.css

h2 {
  color: red;
}

画面を表示すると、「AngularのCSSテスト」が赤色で表示されます。

🔍特徴
Angularでは、このCSSは対象コンポーネント内だけに適用されます。
そのため、別コンポーネントの h2 要素には影響しません。

---

②ngClass

ngClassとは、条件によって適用するCSSクラスを切り替える機能です。
Vueの :class に近い機能になります。

＜基本的な書き方＞

<div [ngClass]="クラス名"></div>

＜テストコード＞

sample.component.ts

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {

  isError = false;

  toggle() {
    this.isError = !this.isError;
  }
}

sample.component.html

<h2
  [ngClass]="
    isError ? 'error' : 'normal'
  ">

  メッセージ

</h2>

<button (click)="toggle()">
  切替
</button>

sample.component.css

.error {
  color: red;
}

.normal {
  color: blue;
}

最初は青色で表示されます。

ボタンを押すたびに、

青色
↓
赤色
↓
青色

のように切り替わります。

🔍Vueとの違い
Vueの:classに相当する機能です。

---

③ngStyle

ngStyleとは、条件によってスタイルを直接変更する機能です。

Vueの :style に近い機能になります。

＜基本的な書き方＞

<div
  [ngStyle]="{
    color: 'red'
  }">
</div>

＜テストコード＞

sample.component.ts

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html'
})
export class SampleComponent {

  isLarge = false;

  toggle() {
    this.isLarge = !this.isLarge;
  }

}

sample.component.html

<p
  [ngStyle]="{
    'font-size':
      isLarge
        ? '32px'
        : '16px'
  }">

  Angularの文字サイズ変更

</p>

<button (click)="toggle()">
  サイズ変更
</button>

最初は16pxで表示されます。

ボタンを押すたびに、

16px
↓
32px
↓
16px

のように文字サイズが切り替わります。

🔍Vueとの違い

Vueの:styleに相当する機能です。

---

4.さいごに

今回は Angular のCSSに関する代表的な機能として、

• コンポーネントCSS
• ngClass
• ngStyle

を紹介しました。

Vueと比較すると、

Vue	Angular
style	component.css
:class	ngClass
:style	ngStyle

という対応関係になります。

AngularではCSSもコンポーネント単位で管理できるため、大規模開発でもスタイルの影響範囲を把握しやすいというメリットがあります。

今回でAngularについては以上になります。
次回以降はまたAI活用関連に戻っていこうかなと考えています。
今後ともよろしくお願いします。