Angular 4 Notes (Part 4) - 2-Way Data Binding

2-way data binding can use to bind data to properties in page.

1. Create a form to enter data.
Lets create a simple user form in user.component.html

<div>

  <label for="name">Name: </label>

  <input type="text" />

</div>

<br>

<div>

    <label for="age">Age: </label>

    <input type="text" />

</div>

<br>

In order to bind data from template to component and vise versa; we need to use ngModel
To use ngModel we have to import forms module.

2. Go to app.modules.ts and import forms module.

3. Go to user.component.html and perform 2-way data binding

It defines by:
1. [(ngModel)] = 'Name of the property'
2. Need name attribute with the same name of the property

Ex:

<input type="text" [(ngModel)]="name" name="name"/>

When a property is inside a model, use it as bellow:

<div>

    <label for="age">Address Street: </label>

    <input type="text" type="text" [(ngModel)]="address.street" name="street"/>

</div>

This model property names should be same as which is in user.component.ts

  name: string = 'Prageeth';

  age: number;

  address: IAddress;

  hobbies: string[];

  data: any;

So, when you change the data in the fields, it will change the appropriate value in the page as well.