Angular 繫結方式

Angular 共有四種資料繫結的方法

內嵌繫結

<p>{{ title }}</p>

屬性繫結

[property]='statement'

<p [ngClass]="{'is-on': item === true}">這是內文</p>

事件繫結

(event)='someMethod($event)'

<button (click)="doFunction()"></button>

doFunction(){
  doSomeThing...

  return result;
}

雙向繫結

[(ngModel)]='property'

component.ts

export class Component {
  keyword = '';
}

component.html

<input type="[(ngModel)]" ="keyword" /> {{keyword}}

app.module.ts 要多 import FormsModule 才能正常執行

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// 新增
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule // 新增
  ],
  providers: [],
  bootstrap: [AppComponent]
})