Two Way Data Binding
* One form of data binding
we do have as Two-Way Data Binding.
* One-way data binding
travers data from component-view whereas two-way data binding transfers
data between in both directions i.e. component-view and view-component.
* One of alternative we have to perform 2-way data
binding using $event.target.value.
* $event indicates
current on-going event of DOM, using this we can get all properties of DOM and
to read DOM value use $event.target.value.
app.component.html
<div>
<input type="text" [value]='name' (input)='name=$event.target.value' />
<br /><br />
<p>The name in textbox is <b>{{name}}</b></p>
</div>
app.component.ts
export class AppComponent {
name: string = 'SKMDotNet';
};
* 2-way data binding in angular does basically 2 things.
1. Sets a specific element property
2. Listening for an element change event
* Angular provides a special syntax for 2 way data binding [()],
This syntax is a combination of both property and event binding.
* To remember easily
Angular has given a terminology, just assuming a banana in a box with NgModel
directive.
* NgModel directive helps to have
data-binding in forms which resides in FormsModule. To use directive we
need to follow the below steps.
1. Import FormsModule to root module (app.module.ts)
import
{FormsModule} from @’angular/forms’
2. Import FormsModule to root module (app.module.ts)
import
{FormsModule} from @’angular/forms’
app.component.ts
export class AppComponent {
name: string = 'SKMDotNet';
};
app.component.html
<div>
<input type="text" [(ngModel)]='name' />
<br /><br />
<p>The name in textbox is <b>{{name}}</b></p>
</div>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
No comments:
Post a Comment