How to Add Class in Angular

1. Add Static or Dynamic Class in Angular
2. Using the NgClass in Angular

We will introduce different methods like className and ngClass to add static or dynamic classes in Angular. We will also introduce how to toggle classes in Angular.

Add Static or Dynamic Class in Angular

Classes are the main part of any web application. We style and perform different functions based on their class name.

Like single-page application frameworks, Angular shines when it comes to data binding. DOM elements are automatically updated if there are any changes in the corresponding JavaScript object.

Let’s create a new application using the following command.

# angular
ng new my-app

After creating our new application in Angular, we will go to our application directory using this command.

# angular
cd my-app

Now, let’s run our app to check if all dependencies are installed correctly.

# angular
ng serve --open

We can bind our class names to any HTML element like we usually add a class name in HTML. The only difference is we use className instead of class, as shown below.

# angular
<div [className]="'my-class'"></div>

The above code shows that it is only a static class assigned to a div element. Now let’s discuss how we can add dynamic classes using className.

As shown below, we can change or add classes to an element based on a condition.

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

When the condition loggedIn is true, it will assign the class logged-class. If the condition is false, it will assign the class my-class.

We can also build a class name on runtime, as shown below.

# angular
<div [className]="'class' + myValue"></div>

The above example shows that we add a string class and a value myValue, which can be anything at runtime and make a class name.

Using the NgClass in Angular

The ngClass is a directive used to make the code look more streamlined because it is just syntactic sugar. It is convenient and shorter to use.

The ngClass is very versatile. So let’s check how we can use ngClass, as shown below.

# angular
<div [ngClass]="'myclass'"></div>

The ngClass also helps us add more than one class name, as shown below.

# angular
<div [ngClass]="['my-class','second-class']"></div>

We can also use conditions to assign class names and toggle them based on conditions, as shown below.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

As shown below, we can also assign multiple classes based on two different conditions.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

We can also use two different conditions, as shown below.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

So in this way, we can easily assign classes based on conditions using ClassName and ngClass. We also learned to add dynamic, static, or multiple classes using Angular directives.