Angular で ngStyle ディレクティブを実装する

1. Angular の ngStyle ディレクティブ
2. Angular で ngStyle ディレクティブを実装する手順

Angular style ディレクティブを使用すると、HTML 要素にスタイルを適用できます。ngStyle ディレクティブは、Angular のスタイルディレクティブのバリエーションです。

この記事では、Angular での ngStyle ディレクティブの使用法について説明します。

Angular の ngStyle ディレクティブ

ngStyle ディレクティブは、CSS セレクターを使用して HTML 要素にスタイルを適用します。このディレクティブは Angular テンプレートエンジンで動作し、HTML ドキュメントのレンダリング方法をより細かく制御できます。

ngStyle ディレクティブは、Angular で最も人気のあるディレクティブの 1つです。カスタム CSS クラスの適用やフォーム要素のスタイル設定など、さまざまな目的に使用できます。

構文：

<element [ngStyle]="{'styleNames': styleExp}">...</element>

ngStyle 属性ディレクティブの値は、任意の条件付き 2 進式または 3 進式にすることができます。さらに、コントローラー内で定義されたメソッド呼び出しを処理します。これは、コントローラーが必要に応じて制御できます。

ngStyle ディレクティブを使用して、モデル値に基づいてビューと CSS のスタイルを管理することもできます。これにより、ngStyle が実行され、モデルの値が変更されたときに CSS スタイルが更新されます。

Angular で ngStyle ディレクティブを実装する手順

ngStyle ディレクティブは単純で、DOM 内の任意の要素に適用できます。あなたはあなたのウェブサイトでそれを使う前にいくつかのステップに従う必要があります。

上記の手順を使用して例を説明しましょう。

TypeScript コード：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    canSave = true;
}

HTML コード：

<h2>Example of ng-style in Angular</h2>
<button
    [ngStyle] = "{
        'backgroundColor' : canSave ? 'pink' : 'blue',
        'color' : canSave ? 'red' : 'yellow',
        'margin-left': '200px',
        'padding': '30px',
        'margin-top': '200px'
    }"
>A simple button</button>

この例では、ngStyle ディレクティブを使用して、単純なボタンを作成し、余白、パディング、フォント、および背景色を指定しました。

ここをクリックして、上記のコードのデモンストレーションを確認してください。