What Is Two Way Data Binding Angular 2

Angular Ii-Way Information Binding — An Easy Introduction

Larn the nuts of Athwart 2-Mode Data binding technique

One of the greatest features offered past the Athwart framework is its style to manage variables changes between the logic of an application and the view presented to the user.

By binding a variable yous are telling Angular to watch it for changes, If changes are detected, the framework takes care of updating the view accordingly.

This approach is groundbreaking compared to previous coding paradigms and is ane of the principal features that made Angular so pop, before that, with vanilla JavaScript or even libraries like jQuery , it'due south up to the developer to update what is displayed on the user screen.

One Way Binding

The Two-fashion data binding, as the name says, refers to the ability to create a bidirectional data menstruation past using specific template syntaxes.

You have the control of this menstruation and y'all tin can even decide which layer tin can modify the values of your variables.

The most mutual mode of showing bound values is to brandish them as children of another DOM-element.

We can reference our variable from the templates using its name surrounded by two braces on each side.

Keep in mind that this method does but provide one-way data bounden.

To display the value of the variable called "first_name" on the screen, we need to create a binding within the components' template.

          <p>{{ first_name }}</p>

Because we are using the braces to differentiate the variable'due south name from normal text, we tin can besides combine this syntax with just text.

          <p>Hello, my proper noun is {{ first_name }} {{ last_name }}</p>

Passing variables as attributes

Some HTML-elements and Athwart components crave that values are passed to them using attributes.

These data-bindings are chosen property bindings.

The syntax is similar and information technology'south similar we would suspend the value to the elements' children, the difference hither is that nosotros are using the syntax with attributes.

1 of the elements that have values via attributes is the input tag.

          <input id="first_name" value="{{ first_name }}" />

Because having braces everywhere would look a little bit cluttered, there is an alternative syntax bachelor which is way ameliorate and the recommended one.

          <input id="first_name" [value]="first_name" />

Instead of braces in the content, there are now square brackets surrounding the attribute name and within the double quotes there is our variable name.

Binding to events

Until at present we've simply used data-binding to display the values of variables from the controller to the view.

But what if we want to react to actions fabricated by users?

What we accept to do is to bind the corresponding result (for instance the click-issue) to a method declared inside our component logic.

To do that, we use attributes, with the name of the issue we want to bind to, surrounded by round brackets:

          <push (click)="onButtonClicked()">Change First Proper name</button>

The method we want to trigger is onButtonClicked.

Of course, we too have to implement that method in our component:

Passing the Event Object

In the instance of mouse-events (and others), it'southward often required to receive the original event to get access to useful information.

We can laissez passer the original effect to our method by using the special $event syntax:

          <button (click)="onButtonClicked($event)">Change Name</button>

Find that that parameter has to be exactly spelled like above, including the dollar sign.

We tin can receive the effect by adding a parameter to our method:

          onButtonClicked(evt: MouseEvent) {
            ...
}

What is Ii-Mode data bounden?

With Two-Mode data binding, Athwart is not simply watching your variables for changes but it besides keeps rails of actions made by the users (for example with input-elements and button clicks) and updates the spring variables accordingly.

That manner, the variables in the code always represent what is displayed in the view.

How to utilize Ii-Way data binding in Angular

There is one commonly used directive that makes two-manner data binding possible and it'south called ngModel.

NgModel tin can exist used with class-elements like inputs to implement two-mode data bounden.

To practise that, we accept to utilize a pretty special syntax: [(ngModel)].

Information technology's a combination of the i-way- and the event binding syntax.

          <input [(ngModel)]="first_name" />

Using this syntax the value of the variable "first_name" is not but shown every bit the value of the input, only both values alter when the user types into the input field.

How 2-Way data binding works

It turns out, the combined syntax is no coincidence and it'due south simply a prettier version of a normal data-bounden to display the value on the screen and an event binding to update the value of the variable.

The example in a higher place can also exist written equally:

          <input [ngModel]="first_name" (ngModelChange)="first_name = $issue" />

This version is longer but gives y'all more than control over what happens and instead of simply updating the value of the "first_name" variable with the latest event, you could do all kinds of stuff when the values changes.

Conclusion

In this tutorial we discovered, how nosotros can use the power of information binding in an Angular awarding, this is quick introduction to the topic but it'due south enough to be productive with template syntax and gave you the basics to beginning creating more complex solutions.

Thanks for reading!