How to add class conditionally to css element in angular

Use the ngClass input attribute with the object notation, where the keys are CSS classes that get added when the expression given in the value evaluates to truthy value, otherwise they are removed.

In the example below the class navbar-dev-green is added to the nav element only for the dev environment (non-prod):

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"
     [ngClass]="{'navbar-dev-green' : environment.production === false}" >
...
</nav>

Project: codever - File: navigation.component.html

To add multiple classes you can list them with space between them. To add different conditions for each class use a boolean expression evaluator for each class as shown in the example in the angular documentation:

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Reference -

https://angular.io/api/common/NgClass

Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.

Codever is open source on Github⭐🙏