【Angular】NgClass、NgStyle、テンプレート構文… 使いこなせる？条件付きスタイリングの教科書

2024-05-14

Angular コンポーネントの条件付きスタイリング

NgClass ディレクティブは、要素にクラスを動的に追加および削除するために使用されます。クラスは、コンポーネントプロパティ、バインディング式、またはその他の論理式に基づいて適用できます。

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  ... コンテンツ ...
</div>

<div [ngStyle]="{'background-color': isActive ? 'green' : 'red'}">
  ... コンテンツ ...
</div>

テンプレート構文を使用して、条件に応じてテンプレートの一部をレンダリングすることもできます。

<div *ngIf="isActive">
  ... アクティブな場合に表示されるコンテンツ ...
</div>
<div *ngIf="!isActive">
  ... 非アクティブな場合に表示されるコンテンツ ...
</div>

コンポーネントスタイルを使用して、コンポーネントの状態やデータに基づいてスタイルを定義することもできます。

.active {
  background-color: green;
}

.disabled {
  background-color: gray;
}

上記は、Angular コンポーネントの条件付きスタイリングに使用できる基本的な方法です。具体的な方法は、コンポーネントの要件によって異なります。

HTML

<button [ngClass]="{'btn-primary': isActive, 'btn-secondary': !isActive}" disabled [disabled]="isDisabled">
  {{ buttonText }}
</button>

CSS

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: black;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

コンポーネント

export class MyComponent {
  isActive = true;
  isDisabled = false;
  buttonText = 'Button';

  toggleActive() {
    this.isActive = !this.isActive;
  }

  disableButton() {
    this.isDisabled = !this.isDisabled;
  }
}

この例では、isActive プロパティが true の場合、ボタンは青色になり、テキストは白くなります。 isActive プロパティが false の場合は、ボタンは灰色になり、テキストは黒くなります。 isDisabled プロパティが true の場合、ボタンは無効になり、不透明度が 0.5 になり、カーソルが not-allowed に変わります。

このサンプルコードは、基本的な例です。実際のアプリケーションでは、より複雑な条件付きスタイリングが必要になる場合があります。

以下の例は、NgStyle ディレクティブとコンポーネントスタイルを使用して、コンポーネントのスタイルを条件付きで変更する方法を示しています。

<div [ngStyle]="{'width.px': isActive ? 200 : 100}">
  ... コンテンツ ...
</div>

.my-component {
  background-color: gray;
  border: 1px solid black;
  padding: 10px;
}

export class MyComponent {
  isActive = true;

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

この例では、isActive プロパティが true の場合、コンポーネントの幅は 200 ピクセルになります。 isActive プロパティが false の場合は、コンポーネントの幅は 100 ピクセルになります。

Angular コンポーネントの条件付きスタイリング：その他の方法

CSS クラスと属性:

コンポーネントテンプレート内で、CSS クラスを動的に生成して要素に適用することができます。これを行うには、バインディングやインターポレーションを使用できます。
例：

<div [class]="myClass">
  ... コンテンツ ...
</div>

.my-class-1 {
  background-color: red;
}

.my-class-2 {
  background-color: blue;
}

コンポーネントコードで、myClass プロパティの値を動的に設定できます。

myClass = 'my-class-1';

changeClass() {
  this.myClass = 'my-class-2';
}

カスタムディレクティブ:

再利用可能な条件付きスタイリングロジックをカプセル化するために、カスタムディレクティブを作成できます。

<div appHighlightIf="isActive">
  ... コンテンツ ...
</div>

@Directive({
  selector: '[appHighlightIf]',
})
export class HighlightIfDirective {
  constructor(private el: ElementRef) {}

  @Input() isActive: boolean;

  ngOnChanges() {
    if (this.isActive) {
      this.el.nativeElement.style.backgroundColor = 'yellow';
    } else {
      this.el.nativeElement.style.backgroundColor = '';
    }
  }
}

状態管理ライブラリ:

NgRx や Ngxs などの状態管理ライブラリを使用して、コンポーネントの状態を管理し、その状態に基づいてスタイルを更新することができます。

<div [ngClass]="{'active': vm.isActive}">
  ... コンテンツ ...
</div>

import { Store } from '@ngrx/store';
import { AppState } from './app.state';

constructor(private store: Store<AppState>) {}

ngOnInit() {
  this.store.select('isActive').subscribe((isActive) => {
    this.isActive = isActive;
  });
}