【Angular】タグに直接スタイルを指定

方法① HTMLタグに直接指定する（インラインスタイル）

普通のHTMLでも使える書き方

<p style="color: red; font-size: 20px;">
  こんにちは
</p>

• style 属性の中に、CSSのプロパティと値を直接書いている
  • color: red：文字色を赤にする
  • font-size: 20px：文字サイズを20pxにする
• このようにすれば、CSSファイルを別途用意しなくても指定できる

方法② Angularのプロパティバインディングを使う

// app.component.ts
textColor = 'blue';

<p [style.color]="textColor">
  こんにちは
</p>

textColor の値を p 要素の style.color プロパティに反映している

Angular Materialコンポーネントの場合はさらに選択肢が+1

例：Angular Material独自の色指定

<mat-icon color="primary">home</mat-icon>

• primary など、そのコンポーネントが対応している値を指定する
  →Angular Materialのテーマに沿った色になる
• 対応する値や色の適用方法は、Materialのバージョンやテーマ設定によって異なる