all AI news
Dynamically Adding Classes with ngClass in Angular
April 23, 2024, 2:01 p.m. | Kavindu Karunasena
DEV Community dev.to
Angular's ngClass directive allows you to conditionally apply CSS classes to HTML elements based on data or expressions within your component. This provides a powerful way to control the element's appearance dynamically.
Template:
<div [ngClass]="myClasses">This element's classes change dynamically!</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent {
myClasses: any;
isActive: boolean = false;
constructor() {
this.myClasses = {
'highlight': this.isActive, // Class applied based on condition
'large': true // Always …
angular app apply change control core css data element html import template webdev
More from dev.to / DEV Community
Jobs in AI, ML, Big Data
Data Engineer
@ Lemon.io | Remote: Europe, LATAM, Canada, UK, Asia, Oceania
Artificial Intelligence – Bioinformatic Expert
@ University of Texas Medical Branch | Galveston, TX
Lead Developer (AI)
@ Cere Network | San Francisco, US
Research Engineer
@ Allora Labs | Remote
Ecosystem Manager
@ Allora Labs | Remote
Founding AI Engineer, Agents
@ Occam AI | New York