今天就只是個筆記，單純記錄寫法如何使用，以便自己日後查找。
畢竟人非聖賢、會忘難免 XD

css

套用 className

變數為 isDark，value 必需為 boolean

isDark = true;

在 html 的 dom 裡設定

<p [ngClass]="isDark ? dark : light">test</p>

<p [ngClass]="{'isDark': true}">test</p>

https://angular.tw/api/common/NgClass

Document difference between [NgClass] and [class] [NgClass] 與 [class] 之間的差異

style

在 html 的 dom 裡設定

<p
  [ngStyle]="{'background-color': '#159', 'color':'#fff', 'font-size': '20px'}"
>
  test
</p>

isDark = true;

<p [ngStyle]="isDark ? {'background-color': '#159', 'color':'#fff'} : {}">
  test
</p>

若 屬性的值為 value

width = 60;
height = 20;

<p [ngStyle]="{'width.px': width, 'height.px': height}>test</p>

https://angular.tw/api/common/NgStyle

:host 設定宿主(host)的樣式

:host {
  display: block;
  border: 1px solid black;
}

在 css 裡加上條件式

:host(.active) {
  border-width: 3px;
}

@HostBinding

在 ts 裡直接綁定 class 到 宿主上

@HostBinding() class = `hey`;

直接綁定 id 到 宿主上

@HostBinding() id = `hey`;

或是直接設定 style

@HostBinding() style = `background: #159;display: block;`;

套上變數

@Input() isColor!: string;

@HostBinding('style.background') get color() {
  return this.isColor;
}

@HostBinding('class.value') get color() {
  return true;
}

若是 return true，class 會掛載 value 這個 class name

@HostBinding('class') get color() {
  return 'yoo';
}

若 HostBinding 裡的 只有 class，則需 return 出一個字串，return 出來的字串則為 class name