屬性型指令 (Attribute directives)

說明

1. 用來改變一個元素、元件、或其他directive的外觀和行為

Template語法：

<element 屬性型指令></element>

<element [屬性型指令]="程式碼"></element>

程式碼範例：ngClass(1) - 程式寫在範本

1.在元件的css檔中設定class樣式

.myClass {
  color: red;
}

2.在Template的元素中使用ngClass屬性型指令

<h1 [ngClass]="{myClass : 條件判斷(根據true或false決定是否套用)}">文字</h1>

<h1 [class.myClass]="條件判斷(根據true或false決定是否套用)">文字</h1>

程式碼範例：ngClass(2) - 程式寫在元件

1.在元件的css檔中設定class樣式

.myClass {
  color: red;
}

2.在Component.ts中加入方法ckeckMyClass()

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

@Component({
  selector: 'example-component',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  ckeckMyClass(){
    return 條件判斷(true或false);
  }

  constructor() { }

  ngOnInit() {
  }

}

3.在Template的元素中使用ngClass屬性型指令

<h1 [ngClass]="{myClass : ckeckMyClass()}">文字</h1>

<h1 [class.myClass]="ckeckMyClass()">文字</h1>