Friday 4 November 2016

Two way binding in Angular 2

Two way data binding is the concept which makes the Angular in to the Peek position in front end development for versions 1.x, later for version 2 some of the news are reached to the users that Two way data binding is no more in Angular2, but in stable version of Angular2 we have the Two way Data Binding, Now we see the sample of Two way data binding.

The Syntax for Two way Data binding is    [(ngModel)]="propertyName"



<div class="container">
    <br />

        Height : <input type="text" [(ngModel)]="height">
        Background : <input type="text" [(ngModel)]="background">
        Class : <input type="text" [(ngModel)]="classname">
        <button type="submit" [style.height.px]="height" 
                [style.background]="background" 
                [class]="classname"            
                >Submit</button>
    </div>



In the above code you can see in each input control we are binding the value to a model using ngModel, and the model is bind to the button properties.

This alone doesnt make sense to work the ngModel in the Angular2 Applications. we have to add one more thing i.e adding FormsModule in the main module, then only ngModel will work.


import { FormsModule } from '@angular/forms';





    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppLoadComponent } from './app.load.component'
    import { UserRoutingModule } from './Routing/user.routing.module';
  
    @NgModule({
        imports: [BrowserModule,HttpModule,FormsModule,AppRoutingModule],
        exports: [],
        declarations: [AppLoadComponent],
        providers:[],
        bootstrap:[AppLoadComponent]
    })
    export class AppModule { 

    }






From this post you can learn how to do the Two way Data Binding in the Angular2 Applications.










2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete