Loading ...

Angular 2 Data Binding And Pipes

Hello everybody,

today  I want to make short note about types of Data Binding in AngularJS 2.

here they are:

  • Interpolation. It looks like this in code: {{firstName}}
  • Property binding. Sample in code: <img [src]='person.photo'>
  • Event binding. Html code pattern: <button (click)='showMessage()'... />
  • Two-way binding: <input [(ngModel)]='someProperty' />

 

Important think to remember about usage of ngModel is the following:

in your imports add importing of FormsModule.

For example like this:

 

@NgModule({

       imports: [

          BrowserModule,

          FormsModule]

       declarations: [

          AppComponent,

.......

       ]

   })

export class AppModule {

 

}

If you need formatting you can use pipes. Example of currency pipe:

{{ product.price | currency: 'USD' : true: '1.2-2' }}

This piping means the following: display as currency with $ sign, use at least 1 number for initial position, with at least two positions after comma and at most two positions after comma.