Tutorial-4 Data Bindings in Angular

Data Bindings in Angular

In this section we will discuss various ways to display data in view and fetching data from the view as well as how to sync the data between view and model.
Remember to show data in the view we have to take help of the templates, because templates are responsible for rendering the HTML in the browser. Angular provides so many ways for achieving the data binding feature, lets discuss all of them with some suitable examples.
Interpolation :{{…}}
Interpolation refers to binding data with the help of curly brackets, i:e {{}}. We normally place the components property name in between the Open Curly Bracket {{ and close Curly Bracket }} .
Synatx : {{component property name}}
Ex: <p>Application Name is{{title}}</p>
Remember anything you put in the Interpolation is known as Template Expression. And every Template Expression produces some value which can be used for, displaying data, assigning value to DOM properties and HTML attributes or can be used by the directives. Template Expression provides facilities to put simple JavaScript codes inside it unless the codes are not dirty, angular will run those codes and will give the desired output as follows.
Ex: <p> Sum of 1 +1 is:{{1+1}} </p> // This code will generate, Sum of 1 + 1 is: 2
 More can be found at https://angular.io/guide/template-syntax#interpolation---- .
Types of Data Bindings:-
1.       One Way Data Binding from Source to View(Property Binding) :
In this type data flows one way from source to view reverse is not allowed. This type of bindings can be used with
Interpolation:
<h2>Author Name: {{author}}</h2> <!-- Binding with Interpolation -->
Attribute:
<h1 class="{{attributeCls}}">About Author</h1> <!--Binding with Attribute -->
Class:
<h3 [class]="attributeCls">Also Known as LazyEasy BRS...</h3><!--Binding with Class -->
Note : We can also bind data using the bind- in above data binding example.

Ex:  <h3 bind-class="attributeCls">Also Known as LazyEasy BRS...</h3><!--Binding with Class using bind-   -->

Property:
<button [disabled]="isEditable">Contact Author</button> <!-- Binding with Property -->

Fig1 View to Source Data Binding Example

Note: This data binding can be done either by using [ target  name] = “expression” or bind-target=”expression” .

2.       One Way Data Binding from View to Source (Event Binding):
In this type data flows one way from View to Source reverse is not allowed. This type of bindings are used with the events in the views and the data binding is done by using (target) = “expression” or on-target=”expression”.

Fig2 Event binding Example

3.       Two Way Data Binding, from Source to View to Source(Property + Event Binding):
In this type of binding data can be updated and available in both view and source. To achieve this we have to combine above two types of bindings, i:e two way data binding can be achieved either by using [(target)] = “expression” or bindon-target=”expression”.
So we can say that Two way data binding is a combination of Property Binding and Event Binding.

Fig3 Two Way Data Binding Example.
More can be found at https://angular.io/guide/template-syntax#two-way-binding--- .

<-- Prev(Basic Building Blocks)                            Tutorial Home                                              Next -->

Comments

Post a Comment

Popular posts from this blog

Tutorial-6 Pipes

Image
Pipes We describe Angular Pipes as it provides a way to format the Data in your html template, without putting a lot of efforts in your program for displaying some data in some specific format angular gives us power of Pipes. Pipes can be used within the Interpolation Expression for showing the formatted output. We use Pipe Operator i:e : I for availing the pipe facility, followed by the required pipe name. Syntax : {{dataModel | pipe name}} Ex : <p>Date of joining is{{joinDate | date}}</p> Parameterized Pipe: Pipes can take further formatting options with the help of parameters, parameters are represented by : (Colon) and placed after the pipe names. Syntax: {{dataModel | pipe name:parameter}} Ex : <p>Date of joining is{{joinDate | date:”MM/dd/YYYY”}}</p> Demonstrating uppercase and lowercase pipes App.cpmponent.ts import { Component } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; ...
Read more

Angular2 Tricks

Hi Friends welcome, in this section, I will introduce you with some of the tips and tricks of Angular2. That I came across while doing my handsfree with AngularJS2. I hope these information's will help you. 💭 What if I will use both template and templateUrl field in my Component? Is it going to through me Error, if not then which field will get considered?       Ex : @Component({   selector: 'banchha',   template:`  <h1>Testing template attribute</h1>   `,   templateUrl: './app.component.html' }) 💨  The answer is that you can use both of them in the Component, it might be logically not correct but syntactically Angular2 allows it(as on 1st May 2017), so no error will be thrown by the transpiler. Answering next which field will be considered, the answer is that the field( between template and templateUrl ) that occurs last in the Component,  will get considered, i:e in above example the  templ...
Read more