範例：調色盤 另外兩種參考寫法

app.component.css

.sample {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}

app.component.html

<input type="range" min="0" max="255" [(ngModel)]="r">
<input type="range" min="0" max="255" [(ngModel)]="g">
<input type="range" min="0" max="255" [(ngModel)]="b">

<!-- 使用 method -->
<div>使用 method</div>
<div class="sample" [ngStyle]="{'background-color': getMyStyle()}"></div>

<hr />

<!-- 使用 getter -->
<div>使用 getter</div>
<div class="sample" [ngStyle]="{'background-color': myStyle}"></div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  r = 100;
  g = 100;
  b = 100;

  // This is getter
  get myStyle(): string {
    // 回傳字串，如 rgb(100, 200, 250)
    return `rgb(${this.r}, ${this.g}, ${this.b})`;
  }

  getMyStyle(): string {
    // 回傳字串，如 rgb(100, 200, 250)
    return `rgb(${this.r}, ${this.g}, ${this.b})`;
  }
}