Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Angular ngClass conditional class Example

Angular ngClass conditional class Example

Aman Jain, October 8, 2022March 16, 2024

In this blog post, we’ll explore Angular ngClass conditional class Example in component’s styles based on certain conditions. Sometimes in our application we want dynamically change the color, size, font, background images so Angular provides various ways to conditionally apply classes and style to elements. We’ll discuss how to use the angular ngClass conditionally to achieve this.

Conditional class in angular using ngClass

let’s take a look at how to use the ngClass directive. The ngClass directive allows you to dynamically add or remove CSS classes based on certain conditions. For example, let’s say we have a component with two CSS classes: .red and .blue. We can use the ngClass conditional directive to conditionally add or remove these classes like so:

<a  [ngClass]="{'red':true, 'blue':false}">
This div will have the class "red" and not the class "blue".> </a>

let understand Angular ngClass conditional class with Example

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Step 2: Create a Component

Create a component and a method

ng g c hello-world
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css'],
})
export class HelloWorldComponent implements OnInit {
  dyanmicCssObject:any ={'margin':'20px','color':'blue'};
  changeColor:boolean=false;
  constructor() {
  }
  onChangeColor() {
    this.changeColor = !this.changeColor;
  }
  ngOnInit() {}
}

Here we used to changeColor method to change the color

Step 3 : Create template and add html

Now, add simple html template with input field

<h2>Angular Dynamic Style CSS with Example- Readerstacks.com</h2>

<div [ngStyle]="dyanmicCssObject"> Dynamic Object COlor </div>
 
<div [ngStyle]="{'background-color': ? 'red' : 'white'}"> Dynamic varibale COlor</div>
<a  href="#" (click)='onChangeColor()'>Change</a>

Related

Javascript Angular angualrCSSdynamicngClass

Post navigation

Previous post
Next post

Related Posts

Softwares angular file upload

How to upload multiple files in angular 12 reactive form

June 20, 2021November 8, 2023

How to upload multiple files in angular 12 reactive form Uploading multiple files with progress in angular is too easy, you can implement it in your website using the below guideline. i will suggest to read my last post Angular file upload with post form data and php $_FILES to…

Read More
Javascript Customdirective in angular

How to Create Custom Directive in Angular 12?

October 12, 2021February 8, 2024

In this tutorial we will learn to create the custom directive in angular and how to use them in our project. Custom directives are those directives by which we can enhance the html capabilities and can bind custom attributes, methods to it. We can reuse them in any element or…

Read More
Javascript Arrow function

What is arrow functions in JavaScript / ES6?

June 12, 2021November 8, 2023

arrow functions in JavaScript are introduced in ES6, before es6 we used normal function which needs to write more code to achieve the functionality. let take an example of arrow functions and es5 normal functions are follow: Normal functions of es5 Arrow functions of es6 uhmm! its looking like so…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version