Data Binding

Angular
 Data Binding
• Data binding means linking data in an application with the UI
element that is rendered to the user.
• When data is changed in the model, the web page is
automatically updated.
• This way, the model is always the only source for data
represented to the user, and the view is just a projection of
the model.
• The glue that puts the view and the model together is data
binding.
• There are many ways in Angular to use data binding to make
an application look and act in different ways.
 Data Binding
• Interpolation: You can use double curly braces ({{}}) to get
values directly from the Component class.
• Property binding: You can use this type of binding to set the
property of an HTML element.
• Event binding: You can use this type of binding to handle user
inputs.
• Attribute binding: This type of binding allows the setting of
attributes to an HTML element.
 Data Binding
• Class binding: You can use this type of binding to set CSS class
names to the element.
• Style binding: You can use this type of binding to create inline
CSS styles for the element.
• Two-way binding with ngModel: You can use this type of
binding with data entry forms to receive and display data.
 Data Binding
• Interpolation involves using the {{ }} double braces to evaluate
a template expression.
• This can be in a hard-coded form, or it can reference a
property of the Component class.
• However, you can also use interpolation to give an HTML tag
property a value.
 Data Binding
app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
imgUrl = '../assests/images/heroes.jpg'
}

app.component.html
<h1>{{title}}</h1>
<img src="{{imgUrl}}"/>
 Data Binding
• The Property binding allows us to bind HTML element
property to a property in the component class.
• Whenever the value of the component changes, the Angular
updates the element property in the View.
• You can set the properties such as
– class,
– href,
– src,
– textContent, etc using property binding.
 Data Binding
• [binding-target]=”binding-source”
• Binding-source is enclosed in quotes and we assign it to the
binding-target.
• The Binding source must be
– a template expression.
– property in the component
– method in component
– a template reference variable
– or an expression containing all of them.
 Data Binding
app.component.ts
export class AppComponent {
myPic: string = "../assets/images/sunset.JPG";
isEnabled: boolean = false;
className: string = "myClass";
}

app.component.html
<img [src]="myPic"/>
<br>
<button [disabled]="isEnabled">Click me</button><hr>
<button disabled="{{!isEnabled}}">Click me</button><br>
<p [ngClass]="className">This is cool stuff</p>
 Data Binding
• Attribute binding is similar to property binding but is tied to
the HTML attribute rather than the DOM property.
• You will generally only use attribute binding on attributes that
do not have a corresponding DOM property (for example,
aria, svg, and table span attributes).
• You define an attribute binding by using the following syntax:

• <div [attr.aria-label] = "labelName"></div>

 Data Binding
• You use class binding to bind CSS style tags to HTML elements.
• It assigns the class based on the result of an expression being
true or false. If the result is true, the class gets assigned.

app.component.css
.blueBox {
height: 150px;
width: 150px;
background-color: blue;
}
.redText{
color: red;
font-size: 24px;
}
 Data Binding
app.component.ts
export class AppComponent {
myCustomClass: string = 'blueBox';
isTrue = true;
}

app.component.html
<div [class]="myCustomClass"></div>
<span [class.redText]="isTrue">Hello my blue friend</span>
 Data Binding
• You use style binding to assign inline styles to an HTML
element.
• Style binding works by defining the CSS style property in the
brackets, with the assignment expression in the quotation
marks.
• The syntax looks almost the same as for class binding but with
style instead of class as the prefix:
 Data Binding
app.component.ts
export class AppComponent {
twoColors: boolean = true;
myBorder = "1px solid black";
}

app.component.css
<span [style.border]="myBorder">Hey there</span>
<div [style.color]="twoColors ? 'blue' : 'forestgreen'">
what color am I
</div>
 Data Binding
• You use event binding to handle user inputs such as clicking,
keystrokes, and mouse movements.
• Angular event binding is similar to HTML event attributes.
• The major difference is that the prefix “on” is removed from
the binding.
• The event is surrounded by parentheses ().
• For example, onkeyup in HTML looks like (keyup) in Angular.
 Data Binding
app.component.ts
clickCount=0
title = "Event Binding"

clickMe() {
this.clickCount++;
}

app.component.css
<h1 [innerText]="title"></h1>

<h2>Example 1</h2>
<button (click)="clickMe()">Click Me</button>
<p>You have clicked {{clickCount}}</p>
 Data Binding
• Two-way binding allows for data to be easily displayed and
updated simultaneously.
• This makes it easy to reflect any changes the user makes to
the DOM.
• Angular does this by using ngModel to watch for changes
and then update the value.
• This is the syntax:

• <input name="uName" [(ngModel)]= "name">

• Add FormsModule in app.module.ts
 Data Binding
app.component.ts
export class AppComponent {
title = 'Tour of Heroes';
greeting = "Hello,world"
}

app.component.html
<h1>{{title}}</h1>
<input [(ngModel)]="greeting">
<h2>{{greeting}}</h2>