Data Binding Pattern
Name | Code | Direction |
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'; }
コメント