Angular CSS Class Binding Example
June 19, 2020
On this page we will provide Angular CSS class binding example without using NgClass
. We can add and remove CSS class names from the HTML element class attribute using CSS class binding. CSS class binding is same as property binding. But we need to add a prefix class.
with CSS class name in class binding. The CSS class added by class binding will override the existing CSS class properties if any property will be common. CSS class binding removes CSS class when expression returns false and adds it when expression returns true.
To add or remove more than one CSS class dynamically we should use
NgClass
directive. Find the link.
Angular NgClass Example
Now here on this page we will discuss complete example of CSS class binding step-by-step.
Contents
Software Used
Find the software used in our demo.1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0
Create CSS Classes
Find the CSS classes which we will use in our example..required{ color: green; font-size: 30px; } .optional { color: red; background-color: cyan; font-family: cursive; }
CSS Class Binding
Class binding is same as property binding with the difference that we need to prefix class name withclass.
. The syntax of using class binding is as follows.
<div [class.required]="isReq">Hello Wordl!</div>
required
is a CSS class name. We need to prefix it with class.
. Here we are using bracket [] for class binding. We can also use bind- keyword with the target. Class binding also works with interpolation. Find the code snippet.
<div bind-class.required ="isReq">Hello Wordl!</div> <div class.required ="{{isReq}}">Hello Wordl!</div>
isReq
a component property which is Boolean. In the above class binding we control our class dynamically. If the value of isReq
is true only when the CSS class required
will be applied in the <div> element.
In normal HTML coding CSS class is used as follows.
<div class="required">Hello Wordl!</div>
isOptional(data) { if (data == 'yes') { return true; } else { return false; } }
required
and optional
.
1. The component method
isOptional('yes')
returns true, so <div> tag will have both the CSS classes. The CSS properties of optional
class will override the CSS properties of required
class if there is any common property.
<div class="required" [class.optional]="isOptional('yes')">Hello Wordl!</div>
2. Here
optional
class will not include in <div> because isOptional('no')
will return false value.
<div class="required" [class.optional]="isOptional('no')">Hello Wordl!</div>
3. Here we consider a scenario in which we are using both CSS classes using regular HTML element class attribute. Now using angular class binding we can on/off CSS classes. If
isOptional()
method returns true, then both the CSS classes will work and if isOptional()
method returns false, then optional
CSS class will be removed.
<div class="required optional" [class.optional]="isOptional('no')">Hello Wordl!</div>
required
CSS class will work.
Complete Example
app.component.ts
import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { isReq = true; isOptional(data) { if (data == 'yes') { return true; } else { return false; } } }
.required{ color: green; font-size: 30px; } .optional { color: red; background-color: cyan; font-family: cursive; }
<div class="required">Hello Wordl!</div> <div [class.required]="isReq">Hello Wordl!</div> <div class="required" [class.optional]="isOptional('yes')">Hello Wordl!</div> <div class="required" [class.optional]="isOptional('no')">Hello Wordl!</div> <div class="required optional" [class.optional]="isOptional('no')">Hello Wordl!</div>
import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.
