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

Javascript Min Length and Max Length Validation in Angular 12 13

Min Length and Max Length Validation in Angular 12 / 13 ?

March 21, 2022March 21, 2022

Angular provides built-in library for validation, in the same way it gives validation methods to validate the string and numbers length as well. so in this tutorial i am going to explain how to use min length and max length validation in angular. In angular validation library it provides different…

Read More
Uncategorized update page data without reload

How to update page data without reload in jQuery?

October 24, 2021November 17, 2023

If you are beginner then this post is for you. For showing the new content on page without refresh we will use JQuery Reload Page without Refresh and server side PHP. In this article, I will demonstrate to show the latest content from server without refreshing the page. This is…

Read More
Javascript Set focus on input angular example

Set focus on input angular example

September 25, 2022March 16, 2024

Angular is a great framework for building front-end web applications. One of its many features is the ability to set focus on input angular element. This can be useful in a variety of situations, such as when you want to focus on a particular input field after a user clicks…

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

  • 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

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version