AngularBindings
AngularBindings
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
PG. 2
interpolation.component.ts: Interpolation with Strings and a Function:
@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"]
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
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>
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
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
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:
Add() {
this.result = this.a + this.b;
} }
PG. 11