Angular 6 Data Binding in brief.

NIA
NIA
Feb 22 · 3 min read

As a angular developer may know about every angular component have a class file(typescript file- .ts) and a corresponding template(html file) file. when working with angular you have to pass data between both template and class file. In here i discusses how push data value into the html template from the class file and user action to the typescript file. There are 4 type of binding in angular.

  1. Interpolation
  2. Property Binding
  3. Event Binding
  4. Two-way data Binding

1.Interpolation — {{}}

Interpolation is used to bind data from the class to the template.

Typescript file (Class file)
Corresponding template file (html file)
Output in the web browser

2.Property Binding

In here, we can bind property of html element from the class file.

Typescript file (Class file)
Corresponding template file (html file)
Output in the web browser

3.Event Binding

Angular provides us with other types of binding, i.e., event binding, which is used to handle the events raised from the DOM like button click, mouse move etc.

Typescript file (Class file)
Corresponding template file (html file)
Output in the web browser

4.Two-way Data Binding

Before two way binding you must import Forms Module into App.module.ts file and include it into imports array.

App.module.ts file

In two way binding we use ngModel directive and it is used as [(ngModel)] in template file.Then we assign property to to bind to class file value. After that i include <p> tag with interpolation (you may already know.) to view changes.

Typescript file (Class file)
Corresponding template file (html file)
Output in the web browser

Now, ngModel will trigger the input event and update the value of input text-box in our view and when we will change the value of the text box, it will automatically update in the name and age property of our component and vice-versa.

I explained, briefly and clearly data binding in angular and you will be able to work with more complex data binding task after understanding this basic thing i have explained.

NIA

Written by

NIA

I’m undergraduate student, and like to share knowledge with everyone.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade