Angular Data Binding

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';
}