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]=''>
  • 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:


       imports: [



       declarations: [





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.

No Comments

Add a Comment


Comments are closed