Scribd
Upload
2 views11 pages

AngularBindings

The document provides an overview of data binding in Angular, explaining its definition and importance in linking component data with the user interface. It details various types of data binding including interpolation, property binding, event binding, attribute binding, class binding, style binding, and two-way binding, along with examples for each type. The document emphasizes how Angular's data binding ensures that changes in the model are automatically reflected in the UI, maintaining a clean and efficient development process.

Uploaded by

dandamanisankar010
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views11 pages

AngularBindings

The document provides an overview of data binding in Angular, explaining its definition and importance in linking component data with the user interface. It details various types of data binding including interpolation, property binding, event binding, attribute binding, class binding, style binding, and two-way binding, along with examples for each type. The document emphasizes how Angular's data binding ensures that changes in the model are automatically reflected in the UI, maintaining a clean and efficient development process.

Uploaded by

dandamanisankar010
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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.

What is Data Binding in Angular?


 Data binding in angular is a concept in web development that establishes a connection or
link between the display data in your application and the user interface (UI) elements. In
simpler terms, it's a way to make sure that the data in your code is automatically reflected
in what the user sees on the screen, and vice versa
Types of data binding
There are many ways in Angular to use data binding to make an application look andact 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.

PG. 1
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
1. Angular interpolation is a way to bind data from your component to the HTML
template. It allows you to embed expressions within double curly braces ( {{ }} ) in
the template, and Angular will replace those expressions with the actual values from
your component.
2. In AngularJS, Interpolation is a way to transfer the data from a TypeScript code to an
HTML template (view), i.e. it is a method by which we can put an expression in
between some text and get the value of that expression. Interpolation basically binds
the text with the expression value.
3. Interpolation is ideal for displaying dynamic data directly in templates, using a simple
{{ }} syntax. On the other hand, property binding is more suited for binding
component properties to HTML element properties, allowing for dynamic updates
based on changes in the component

 Interpolation refers to embedding expressions into marked up text. By default,


interpolation uses the double curly braces {{ and }} as delimiters.
 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:
<HTML Tag property="{{interpolatedbindvarible}}"/>
 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
:<imgsrc="{{imgUrl}}"/>
Example Program:

PG. 2
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>
<imgsrc="{{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;
}

`]

})
export class AppComponent {

PG. 3
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){


vararrString = arr.join(", ");
return " " + arrString
}
imageSrc: string = "../assets/images/1.jpeg"
}

Property Binding
• Property binding in Angular helps you set values for properties of HTML elements or
directives. Use property binding to do things such as toggle button features, set paths
programmatically, and share values between components .

• 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">
import { Component } from '@angular/core';
property.component.ts: Property Binding with Logic and theApplication of a Class
Name
@Component({
selector: 'app-root',
template: `
<img [src]="myPic"/>
<br>
<button [disabled]="isEnabled">Click me</button><hr>

PG. 4
<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;
}
`]
})
export class AppComponent {
myPic: string = "../assets/images/2.jpeg";
isEnabled: boolean = false;
className: string = "myClass";
}

Attribute Binding
• Attribute binding is similar to property bindingbut 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>

Class Binding
Class binding in Angular is a way to set the class property of a view
element. It allows users to add and remove CSS class names from an

PG. 5
element's class attribute. The syntax for class binding is similar to property
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

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


@Component({
selector: 'app-root',
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;
}
`]
})
export class AppComponent {
myCustomClass: string = 'blueBox';
isTrue = true;
}

PG. 6
Style Binding
Style binding in Angular is a feature that allows developers to dynamically apply styles to
HTML elements based on specific conditions or variables. This can be done in real-time
within Angular templates, unlike static styling where styles are predefined in the CSS files.
Here are some things to know about style binding in Angular:
 Syntax
The syntax for style binding is similar to property binding, but starts with
the prefix class, followed by a dot (.) and the name of the style. For
example, <element [style.style-property] = "'value'".
 Conditional styling
Style binding can be used to apply styles conditionally. For example, <div
[style.color]="rating<4 ? ' red' : 'green'"></div>. In this example, the style.color property is
set to "red" if the rating is less than 4 and "green" if it's false.
 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 Appearanceof the HTML

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


@Component({
selector: 'app-root',
template: `
<span [style.border]="myBorder">Hey there</span>
<div [style.color]="twoColors ? 'blue' : 'forestgreen'">
whatcolor am I
</div>
<button (click)="changeColor()">click me</button>
`
})

PG. 7
export class AppComponent {
twoColors: boolean = true;
changeColor = function(){
this.twoColors= !this.twoColors;
}
myBorder = "1px solid black";
}

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

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


@Component({
selector: 'app-root',
template: `
<input (keyup)=”onKeyUp($event)”>
<p> {{text}}</p>
<input (mousemove)=”move($event)”>
<p> x:{{x}} y:{{y}</p>
`,
styles: [`
p{
font-size: 24px;
background-color: blue;

PG. 8
}
h1 {
color: red;
font-size: 24px;
}
`]
})
export class AppComponent {
x:nmber=’’;
y:nmber=’’;
text:nmber=’’;

onKeyup(event:any){
this.text= event.key;
this.text += event.target.value + ' | ';
}
move(event:any){
this.x = event.clientX;
this.y = event.clientY;
}
}

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

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


@Component({
selector: 'app-root',
template: `
<input [(ngModel)]="text"><br>

PG. 9
<input bindon-ngModel="text"><br>
<input [value]="text" (input)="text=$event.target.value">
<h1>{{text}}</h1>
`
})
export class AppComponent {
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:

Addition two Binding Example:


import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Addition Example</h1>
<input [(ngModel)]="a" placeholder="Enter 1st Number"
type="number"/><br/><br/>
<input [(ngModel)]="b" placeholder="Enter 2nd Number"
type="number"/><br/><br/>
<button (click)="Add()">Add</button> <br/><br/>
<p *ngIf="result !== null">Result: {{ result }}</p>
`
})
export class AppComponent {
a: number = 0;
b: number = 0;
result: number | null = null;

Add() {
this.result = this.a + this.b;
} }

PG. 11

You might also like