DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to add class conditionally to css element in angular
Adrian Matei for Codever

Posted on • Updated on • Originally published at codever.dev

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode


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β­πŸ™

Top comments (0)

Create an Account! The only reason people scroll to the bottom... Β 
is because they want to read more.

Create an account to bookmark, comment, and react to articles that interest you.