Learn about Data Binding in Angular


Learn about Data Binding in Angular

Data Binding means connecting the data to the view or UI, it means the data we defined inside our component is attached to the HTML template.

One-Way Data Binding
Bind the data from model to view.
Data flows in a single direction so that whenever the data changes in a component, it also updates the view with new data.
ng-bind has one-way data binding

export class AppComponent {
  title = "CmsOnline"

   Welcome to {{title}}


Two-Way Data Binding
Data flows in both directions from model to view and view to model.
It means any change happens in the view updates the data and any change happens in the data updates the view.
Use ngModel directive to create two-way data binding.

export class AppComponent {
title = "CmsOnline"

<input [(ngModel)] = "title" />
Welcome to {{title}}

If We change the <input> element value in the view it updates the title property.
similarly, if we change the title property inside the component file it also the updates the
<input> element value.


How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Be the first to comment

Leave a Reply

Your email address will not be published.


three × 3 =