Thursday, April 13, 2017

Data binding in Angular 2

Property binding


<td><img [src]='product.imageUrl' 

export class ProductListComponent{
     pageTitle:string='Product List';
                      "productId": 1,
                      "productName": "Leaf Rake",
                      "productCode": "GDN-0011",
                      "releaseDate": "March 19, 2016",
                      "description": "Leaf rake with 48-inch wooden handle.",
                      "price": 19.95,
                      "starRating": 3.2,
                      "imageUrl": "
  • ngModel is basically 2 way
  • We need to include form module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//form module
import {FormsModule} from '@angular/forms'

import { AppComponent }  from './app.component';
import { UserComponent }  from './user.component';

  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent , UserComponent],
  bootstrap:    [ AppComponent ]
export class AppModule { }


<!DOCTYPE html>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
      System.import('app').catch(function(err){ console.error(err); });

    <my-app>Loading AppComponent content here ...</my-app>

Event binding

Two way data binding

ngModel directive a is part of FormsModule. We need to import it in AppModule

  • [ ] Square bracket is used to indicate property binding 
  • ( ) is used for event binding to send a notification to the user entered data back to the class property

No comments:

Post a Comment