Angularスタイルの条件分岐方法


  1. ngIfディレクティブを使用する方法: ngIfディレクティブは、要素の表示と非表示を切り替えるために使用できます。以下の例では、条件に基づいてスタイルを変更します。

    HTMLテンプレート内の例:

    <div *ngIf="condition" [ngStyle]="{'color': 'red', 'font-weight': 'bold'}">
     条件が真の場合に赤色で太字になります。
    </div>

    上記の例では、conditionが真の場合にスタイルが適用されます。

  2. [ngClass]ディレクティブを使用する方法: [ngClass]ディレクティブを使用すると、複数のスタイルクラスを条件に基づいて適用できます。以下の例では、条件によって異なるスタイルクラスを適用します。

    HTMLテンプレート内の例:

    <div [ngClass]="{'highlight': condition, 'underline': !condition}">
     条件が真の場合、ハイライトが適用され、偽の場合は下線が適用されます。
    </div>

    上記の例では、conditionが真の場合はhighlightクラスが、偽の場合はunderlineクラスが適用されます。

これらはAngularで条件分岐スタイルを実装するためのシンプルで一般的な方法です。あなたの特定の要件に応じて、これらの方法をカスタマイズすることもできます。