Okay！最後幾天要看的內容是關於 Angular 的雙向繫結。

如果你跟我一樣是從 Angular tutorial 開始學習Angular 的話，那你應該會從 Data binding 這個章節內的其中一個說明連結，連到 Angular glossary 看到 two-way data binding with ngModel 的字樣。

Two-way binding 的效果就如其名，除了從 TypeScript 的邏輯將資料提供給 HTML Template 顯示之外，他也能夠將 HTML 上因為的使用者互動而變更的值反應給 TypeScript。一般最常見到的 two-way binding 應該就是 ngModel，但其實除了 ngModel 之外，開發者也可以透過 Angular 提供的語法糖來達到相同的效果。

關於範例

<app-slider-wrapper [(sliderValue)]="slider"></app-slider-wrapper>
<div>
  <label>Slider value: </label><label>{{ slider }}</label>
</div>

↑ Block 1：AppComponent HTML template

@Component({
  selector: 'app-slider-wrapper',
  styleUrls: ['./slider-wrapper.component.scss'],
  template: `<mat-slider
    [value]="sliderValue"
    (change)="onChange($event)"
  ></mat-slider>`,
})
export class SliderWrapperComponent {
  @Input() sliderValue: number;
  @Output() sliderValueChange = new EventEmitter<number>();
  constructor() {}

  onChange(event: MatSliderChange): void {
    this.sliderValueChange.emit(event.value);
  }

↑ Block 2：SliderWrapperComponent

以上的範例會有下面圖的效果：

當滑動 slider 時，外層 AppComponent 的 label 就會跟著有反應。

小小總結

要達成像範例一樣的 two-way binding，需要完成的其實就是兩件事：

1. 有一個 @Input property，以本例來說就是 sliderValue。
2. 有一個 @Output 的 EventEmitter，名稱是想要做 two-way binding 的屬性名稱加上 Change 後綴，以本例來說是 sliderValueChange。

只要做到以上兩件事，Angular 就會主動幫你把它變成支援 two-way binding 的屬性囉！

以上就是今天要介紹給各位的 tip，明天會再接著探討 Angular 是怎麼將 @Input property 與 @Output EventEmitter 關聯在一起，讓使用者的 property 也能夠透過 banana in a box 達成 two-way binding。

相關連結

• https://angular.io/guide/two-way-binding

最後 3 天啦

以下按照入團順序列出我們團隊夥伴的系列文章！

請自由參閱 ?

• 打通 RxJS 任督二脈
• 深入 Azure 雲端服務
• 如何用Laravel寫一個簡單的部落格網站
• 推動資安從0起步邁向70分，不用花大錢也能有聲有色保平安。
• Azure Serverless 平步青雲，漫步雲端