Angular Data Binding

スポンサーリンク

Data Binding Pattern

NameCodeDirection
Interpolation{{title}}DOM <- Component
Property Binding<img [src]=”>DOM <- Component
Event Binding <button (click)=’clickbutton()’>DOM <- Component
Two-way Binding<input [(ngModel)]=’listFilter’/>DOM <-> Component

Property Binding

Attr, property

component

export class TestComponent {
  imageWidth: number = 50;
  imageMargin: number = 2;
}

template

<img [src]='product.imageUrl' [title]='product.productName'
	[style.width.px]='imageWidth' [style.margin.px='imageMargin'>

Event binding

() : Target Event

” : Template Statement

component

export class ListComponent {
   clickImage() : void {
      this.showImage = !this.showImage;
   }
}

template

<button (click)='clickImage()'>

Two -way Binding

ngModel : Forms module

app.module.ts

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

@NgModule({
   imports: [
      FormsModule
   ]
})

html

<input [(ngModel)]='filter'>

component

exporet class ListComponent {
   filter: string = 'bank';
}

コメント