One-way binding does below things:
- Angular js provide one way data binding when you use [] symbol with property or when you use interpolation .data is getting passed from view to component and from component to view.
In One way binding if user change anything in child component andonly one way communication is established with variable then that value wont get reflected in parent
Below are some examples
Two-way binding does two things:
- Sets a specific element property.
- Listens for an element change event.
Below are some examples
In Angular JS two way data binding is denoted by [()] its also called banana sign.
This is combination of property binding “[]” and event binding “()”
Two way binding helps user to setup communication between component to view and view to componetn so its bi directional communicaiton that will help user.
This will be useful when user changes anything in child component and that value needs to be reflected in parent component .
In Angular formmodule ngModel will provide two binding between component and view .
In todays example we will see One way and Two way data binding with Ng Model
In this Example we will use color to demonstrate how one way and two binding can be achieved with ng-Model
- Create your AngularJs Application
Please follow steps mentioned in below post
Hello World with Angular JS
Prerequisites Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool. For current setup we are using visual code studio Kindly down load latest version of nodejs and visual code studio on your machine and complete setup Node Installation 1 Go to…
2. Create Child Component
ng generate component twowaybindingwithngmodel3. Edit twowaybindingwith-ngmodel.component.ts
In this component we have declared variables to demonstrate one way and two way binding initially both will have red color
When user will click button it will log color and we will see if it reflects in console as per change.
twowaybindingwith-ngmodel.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-twowaybindingwith-ngmodel',
templateUrl: './twowaybindingwith-ngmodel.component.html',
styleUrls: ['./twowaybindingwith-ngmodel.component.css']
})
export class TwowaybindingwithNGModelComponent implements OnInit {
twowaycolor = 'red';
onewaycolor = 'yellow';
constructor() { }
ngOnInit() {
}
click() {
console.log('Two way color:' + this.twowaycolor);
}
clickme() {
console.log('One way color:' + this.onewaycolor);
}
}
4. Edit HTML File twowaybindingwith-ngmodel.component.html
Here we are adding button which will be get clicked to print color on console.
IN first block we have used two way binding with
Enter Color : <input [(ngModel)] ='twowaycolor'> And in second blod we are using it for one way data binding
Enter Color : <input [ngModel] ='onewaycolor'> When in first block twowaycolor value get changed and will click button it will be get printed because data will be get passed from component to view and view to Component in bi-direction.
When in second block onewaycolor value get changed and will click button it will be print old value because new value from view is not getting passed to component as its using unidirectional data binding with [ngModel
twowaybindingwith-ngmodel.component.html
<p>One and Two way Binding with NG Model</p>
<div class="card-panel blue ">
<h2>Two way Binding</h2>
Enter Color : <input [(ngModel)]='twowaycolor'>
<br>
Color value is: {{twowaycolor}}
<br>
<button (click)="click()"> CLickme</button>
</div>
<div class="card-panel blue lighten-3">
<h2>One way Binding</h2>
Enter Color : <input [ngModel]='onewaycolor'>
<br>
Color value is: {{onewaycolor}}
<br>
<button (click)="clickme()"> CLickme</button>
</div>
Ng Model need to declare form module in app.module.ts else it will give you error .Kindly add FormsModule in app.module.ts so kindly add like below code base
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TwowaybindingwithNGModelComponent } from './twowaybindingwith-ngmodel/twowaybindingwith-ngmodel.component';
import { FormsModule } from '@angular/forms';
import { NgclassandngstyleComponent } from './ngclassandngstyle/ngclassandngstyle.component';
@NgModule({
declarations: [
AppComponent,
TwowaybindingwithNGModelComponent,
NgclassandngstyleComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5. Add Materialize css in index.html
In Index.html we will add materialize css and js file to use elegant UI
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularJSTwoWayDataBanding</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
6. Edit app.component.ts : This is parent component
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularJSInBuiltDirectives';
}
7. Edit app.component.html
We have added ngmodel component in app.component.html
app.component.html
<div class="card-panel blue lighten-3">
<app-twowaybindingwith-ngmodel></app-twowaybindingwith-ngmodel>
</div>
8. Run Application
If you clone entire project then first run npm install so all dependencies will get downloaded.
Then run below command
ng serve --openYou will get below kind of output for your project once it get compiled and it will open your application in browser
9. Check Outpput
go to http://localhost:4200 path in browser
We need to enter new color in text box
After editing color in both input boxes. Change only reflected in first color and not in second one that says first one is having two way data binding and second one is having one way data binding.
Now we will click on button to check value in component.
Below screenshot displays One and Two way data binding between variables using ng model
This example demonstrated that v ng-Model can be used for one and two way binding.
Source Code:https://github.com/letsblogcontent/AngularJS/tree/master/AngularJSInBuiltDirectives
letsblogcontent.wordpress.com 