Loading ...

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.

Ready to take your Acumatica development to the next level? Just like AngularJS 2 offers flexible data binding options to tailor your applications, Acumatica can be customized to fit your unique business needs. Whether it's enhancing functionality, integrating with other systems, or creating a seamless user experience, we’re here to help. Leave us a customization request today and let’s build something extraordinary together!