Angular 2 Data Binding And Pipes
22 December 2016
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.