Data Binding

 In This topic we are going to look at Data Bindings and how angular keeps both view and component in sync. we will see what techniques we can use to keep component and view in sync.

Data Binding in Angular ➤➤

In simple word data binding is a technique which keeps component and view in sync in respect to data. Whenever user updates data in view, angular updates the component and when component get any new data angular sync it with view.

The angular data binding can be classified in two group ➣

1. One-way Binding

2. Two-way Binding

One-way data binding ⮞

In one way data binding data flows in one direction, either from component to view or from view to component.

To bind data from component to view or html we can use property binding or Interpolation.

Interpolation ⮞⮞

If you want to display read only data in a view template then we can use angular interpolation. The interpolation allow us to place the component property name in the view template, enclosed in  curly braces.

Angular use double curly braces in template to denote interpolation {{ templateExpresion }}.

 'So Angular Interpolation is a technique that allow the user to bind a value to a UI Element'.

When you run your application you can see title is coming in your UI as Below

Interpolation Notes ➤➤

1. Interpolation is a one way binding from component to html view.

2. Interpolation should not change state of application.
    It means you can not use :
        ⮞ Assignments operator like =, +=, -= etc.
        ⮞ Bitwise operators like | and &

        ⮞ Keyword like instanseOf, typeOf etc.

        ⮞ Increment and decrement operators ++ or --

3. Interpolation must return String, if we return object it will not work.

4. Interpolation only work with properties not attribute.

Property Binding ➤➤

The Angular property binding is used to bind values of angular component to HTML Element.

Syntax : [binding-target] = "binding-source"

Example : <h1 [innerText] = "title"/>

Here innerText is the target that is a property of h1 tag and title is the source that is a component property. Code Sample  and output below.

Difference between interpolation and property binding.

Interpolation is an alternative approach to property binding but there are some scenarios where you have to use interpolation. For example if you have to concatenate string then you need to use angular interpolation instead of property binding 

If you are working with non-string values like Boolean to set the property value of an HTML element then you need to use property binding in place of interpolation.

Event Binding ➤➤

When a user interact with an application in form of button click, mouse hover, selecting from drop down, any typing in text box it generates an event which needs to be handled to perform some action. we use event binding to get notified when these event occurs. 

Example: 
            <button (click) = "onClick()"> Click Me </button>

$event Payload

Dom Event carries the event payload i.e. the information about the event. we can access the event payload by using $event as an argument to the handler function.

Two Way Data Binding ➤➤

Popular and widely used data binding mechanism in angular application is two way data binding. it is basically used in the input type field or any form element. Whenever user makes changes to a form field we would like to update our component. Similarly, when we update the component with new data we would like to update the view as well.

Two-way data binding is a combination of property binding and event binding. 

Syntax : <input [value] = ‘data’ (input) = ‘data = $event.target.value’>

Example :

<h3>Example</h3>

<input type="text" [value]="name" (input)="name=$event.target.value">

<p> Username : {{name}}</p>

<button (click)="userProfile()">Show Details</button>

Two way data binding using ngModel Directive

You can also implements two way data binding using directive (ngModel) . The ngModel Directive combines the square bracket of property binding with parentheses of event binding in single notation.

Syntax : <input [(ngModel)] = ‘data’>

If you see can't bind ngModel since it isn't a known property of input. 

This is because the ngModel directive is available in the system module called FormsModule. If you want to use the ngModel directive, then in your root module that is AppModule, you will have to import the FormsModule first.

 ← Components                                                                                                                 Angular Directives →