Sometimes in Angular development, you'll find that you need to add a class to a template element based on a conditional.
Well that can get challenging because the conditional is usually evaluated in TypeScript code in the component class whereas your template speaks HTML.
Fortunately, the folks who developed the Angular framework thought about that. And they made it easy for you to add classes based on TypeScript conditionals.
In this guide, I'll show you a few different ways to accomplish it.
Easy and Readable
I call the first option "easy and readable" because that's exactly what it is.
Developers who work on your code after you've been promoted to HeadMaster Architect of Everything, Inc. will thank you for making your code easy to read if you follow this option.
By the way: the requirement for the purposes of this guide is to lay out a flex container in rows if the user is using a vertical navigation bar on the side or lay it out in columns if the user is using a top header menu instead.
And yeah, I'm using Bootstrap here so these class names might look familiar to you.
Here's the easy and readable solution:
<div class="d-flex" [class.flex-row]="showVerticalMenu" [class.flex-column]="showHorizontalMenu">
...The code binds to the flex-row and flex-column Bootstrap CSS classes to determine whether or not it should use them.
If the showVerticalMenu boolean in the component class is set to true, then the flex-row class gets included in that <div> element.
If the showHorizontalMenu boolean in the component class is set to true, then the flex-column class gets included in that <div> element.
And you can see why I call it "easy and readable."
Easy, But Less Readable
Here's another option for you:
<div class="d-flex" [ngClass]="{'flex-row': showVerticalMenu}">
...Note the difference in content inside the brackets. It's ngClass instead of class.yourClassName.
In fact, you don't include the class name at all inside the brackets. Instead, that gets specified inside the curly braces that you see on the right.
The name of the class is specified as a string. After the colon is where you put your "if" condition that evaluates to a boolean.
If the boolean evaluates to true, then the class gets included in the element. Otherwise, it doesn't.
However, you can only include one (1) [ngClass] per element. So if you want to include multiple classes based on various conditions, you'll have to go this route:
<div class="d-flex" [ngClass]="{'flex-row': showVerticalMenu, 'flex-column' : showHorizontalMenu, 'vh-100' : showHorizontalMenu }">
...You can separate different class name/condition pairs with a comma.
As I pointed out in the subheader, that's not quite as readable. But it works.
The Ternary Route
You could also use a ternary. Like this:
<div class="d-flex" [ngClass]="showVerticalMenu ? 'flex-row' : 'flex-column'">
...That follows the standard ternary structure: a conditional followed by a question mark.
The first string after the question mark is the class that gets included if the condition evaluates to true. The second string, after the colon, is the class the gets included if the condition evaluates to false.
That's a nice option if you just need to choose one of two classes based on the condition of a boolean.
If you need something more sophisticated, though, go with one of the options above.
Wrapping It Up
There you have it. Three (3) cool ways to add classes to Angular elements based on conditionals.
It's up to you to choose the option above that works best for the solution you're currently developing.
Have fun!
Photo by Ahmed akacha from Pexels