Angular DataBindings Materials

Angular Data Binding
 One of the best features of Angular is the built-in data binding.

 Definition: Data binding is the process of linking data from a component with what is
displayed in a web page.
 When data in the component changes, the UI rendered to the user is automatically updated.
Angular provides a very clean interface to link the model data to elements in a web page.
 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.
Types of data binding
There are many ways in Angular to use data binding to make an application look and act in
different ways. The following is a list of the types of data binding available with Angular that
are
1. Interpolation: You can use double curly braces ({{}}) to get values directly from the
Component class.
2. Property binding: You can use this type of binding to set the property of an HTML
element.
3. Event binding: You can use this type of binding to handle user inputs.
4. Attribute binding: This type of binding allows the setting of attributes to an HTML
element.
5. Class binding: You can use this type of binding to set CSS class names to the element.
6. Style binding: You can use this type of binding to create inline CSS styles for the
element.
7. Two-way binding with ngModel: You can use this type of binding with data entry
forms to receive and display data.
Interpolation Binding
 Interpolation involves using the {{}} double curly braces to evaluate a template
expression.
 This can be in a hard-coded form, or it can reference a property of the Component class.
The syntax for interpolation:
PG. 1
<HTML Tag property="{{interpolatedbind varible}}"/>
 However, you can also use interpolation to give an HTML tag property a value (for
example, the img tag).
 Here is an example of the syntax
:<img src="{{imgUrl}}"/>
Example Program:
interpolation.component.ts: Interpolation with Strings and a Function:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Angular JS Bindings!</h1><br>
<span>{{str1}} :{{name}}</span><br>
<span>To Day Current Date:{{today}}</span>
<img src="{{imageSrc}}" />
<br>
<p>{{str2 + getLikes(likes)}}</p>
`,
styles:[`
h1,span {
font-weight: bold;
border: 1px ridge blue;
padding: 5px;
background-color:green;
}
img{
width: 300px;
height: auto;
}
p{
font-size: 35px;
color: darkBlue;
}
PG. 2
`]
})
export class AppComponent {
title = 'rvr';
today : Date;
constructor(){
this.today=new Date();
}
str1: string = "Hello my name is"
name: string = "CH.RATNA BABU"
str2: string = "I like to"
likes: string[] = ['Cycle', "Bike", "Jeep"]
getLikes = function(arr: any){

var arrString = arr.join(", ");
return " " + arrString
}
imageSrc: string = "../assets/images/1.jpeg"
}
Property Binding
• You use property binding when you need to set the property of an HTML element. You
do this by defining the value you want within the Component class.
• Then to bind that value to the component template, using the following syntax:
<img [src]="myValue">
property.component.ts: Property Binding with Logic and the Application of a Class
Name
@Component({
template: `
PG. 3
<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>
`,
styles: [` img {
height: 1000px;
width: auto;
}
.myClass {
color: red;
font-size: 24px;
}
`]
})
myPic: string = "../assets/images/2.jpeg";
isEnabled: boolean = false;
className: string = "myClass";
}
Attribute Binding
• Attribute binding is similar to property binding but is tied to the HTML attribute
rather than the DOM property. You are not likely to use attribute binding very often,
but it is important to know what it is and how to use it.
• 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>
PG. 4
Class 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.
 The following is an example of the syntax:
1. <div [class.nameHere] = "true"></div>
2. <div [class.anotherName] = "false"></div>
class.component.ts: Property Binding with Logic and theApplication of a Class Name

@Component({
template: `
<div [class]="myCustomClass"></div>
<span [class.redText]="isTrue">Hello my blue friend</span>
`,
styles: [`
.blueBox {
height: 150px;
width: 150px;
background-color: blue;
}
.redText{
color: red;
font-size: 24px;
}
`]
})
myCustomClass: string = 'blueBox';
isTrue = true;
}
PG. 5
Style 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:
1. <p [style.styleProperty] = "assignment"></p>
2. <div [style.backgroundColor] = "'green'"></div>
style.component.ts: Style Binding to Change the Appearance of the HTML

@Component({
template: `
<span [style.border]="myBorder">Hey there</span>
<div [style.color]="twoColors ? 'blue' : 'forestgreen'">
what color am I
</div>
<button (click)="changeColor()">click me</button>
`
})
twoColors: boolean = true;
changeColor = function(){
this.twoColors = !this.twoColors;
}
myBorder = "1px solid black";
}
PG. 6
Event 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, and instead the event is
surrounded by parentheses (()).
• For example, onkeyup in HTML looks like (keyup) in Angular.
• A common purpose for event binding is to run functions from the component.
• The following is the syntax for click event binding:
<button (click)="myFunction()">button</button>
Example:
event.component.ts: to Implement event Data Binding

@Component({
template: `
<input (keyup)=”onKeyUp($event)”>
<p> {{tet}}</p>
`,
styles: [`
p{
font-size: 24px;
background-color: blue;
}
h1 {
color: red;
font-size: 24px;
}
`]
})
text=’’;
PG. 7
onKeyUp(x){
this.text+=’x.target.value’+’|’;
}
}
Two-Way 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 [(ngModel)] = "myValue">
Example:
twoWay.component.ts: Different Methods to Implement TwoWay Data Binding

@Component({
template: `
<input [(ngModel)]="text"><br>
<input bindon-ngModel="text"><br>
<input [value] ="text" (input) ="text=$event.target.value">
<h1> {{text}} </h1>
`
})
text: string = "some text here";
}
An Angular application that shows multiple ways to accomplish twoway data
binding. The variable and the view are updated every time there is a change to
the input field
Output:
PG. 8
PG. 9

Angular DataBindings Materials

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular DataBindings Materials

Uploaded by

Copyright:

Available Formats

Angular Data Binding

 One of the best features of Angular is the built-in data binding.

import { Component } from '@angular/core';

getLikes = function(arr: any){

import { Component } from '@angular/core';

style.component.ts: Style Binding to Change the Appearance of the HTML

import { Component } from '@angular/core';

import { Component } from '@angular/core';

import { Component } from '@angular/core';

You might also like