Class Binding In Angular
* Class Binding is another form of data-binding, used to render classes dynamically.
* There are specifically 2
types of class binding we have in Angular.
Single
Class Binding Multiple Class
Binding
* Normally we used to have
our class applied to elements without using any binding as below:
<input type=“text”
value=“Welcome to SKMDotNet Angular” class=“bgColor”>
* To add/remove
classes to/from an element we are using Single Class Binding of angular
which start with prefix class followed by a dot (.) and name of class,
enclosed in a pair of square braces and with an Boolean expression.
i.e. [class.bgColor]=“isBgColorRequired”.
* To have Multiple
Class Binding we need to make use of generic syntax i.e. [class]=‘expression’
where the expression is a pair of string values.
* A multiple class
binding can be also bind with help of a method expression.
<input type=“text” [value]='textValue' [className]='getClasses()'>
where
getClasses() {
return 'bgColor font shapeStyle';
};
* The NgClass directive can be used as an alternative to direct [class]
bindings. However, using the above class binding syntax without NgClass is
preferred because due to improvements in class binding in Angular, NgClass
no longer provides significant value, and might eventually be removed in the
future.
<input
type=“text” value=“Welcome to SKMDotNet Angular” class=“bgColor”>
app.component.html
<div style="text-align: center;">
<h1>welcome to {{myData}} application</h1>
<br /><br /><br />
<h5>Appearance from simple class/style we do have</h5>
<input type="text" value="Welcome to SKMDotNet Angular" class="bgColor" />
<br /><br />
<h5>Appearance from single class binding</h5>
<input type=“text” [value]='textValue' class='bgColor font shapeStyle' [class.bgColor]='isBgColorRequired'>
<br /><br />
<h5>Appearance from multiple class binding out of an expression</h5>
<input type=“text” [value]='textValue' [class]='classesToApply'>
<br /><br />
<h5>Appearance from multiple class binding using a method expression</h5>
<input type=“text” [value]='textValue' [className]='getClasses()'>
<br /><br />
<h5>Appearance from multiple class binding using ngClass</h5>
<input type=“text” [value]='textValue' [ngClass]='getClasses()'>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData = "angular";
textValue = "Welcome to SKMDotNet Angular";
isBgColorRequired = true;
classesToApply = 'bgColor font shapeStyle';
getClasses() {
return 'bgColor font shapeStyle';
};
};
app.component.css
.bgColor{
background-color: magenta;
}
.font{
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
.shapeStyle{
height: 50px;
width: 500px;
}
