JIYIK CN >

We will cover different methods like classNameand ngClassto add static or dynamic classes in Angular. We will also cover how to toggle classes in Angular.

Adding static or dynamic classes in Angular

Classes are the main part of any web application. We design and implement different functionalities based on the class name.

Like the single-page application frameworks, Angular shines in data binding. If any changes occur in the corresponding JavaScript object, the DOM elements are automatically updated.

Let us 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 application to check if all dependencies are installed correctly.

# angular
ng serve --open

We can bind a class name to any HTML element just like we normally add class names in HTML. The only difference is that we use classNameinstead of class, as shown below.

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

The above code shows that it is just a static class assigned to a div element. Now let's discuss how to classNameadd dynamic classes using .

As shown below, we can change or add classes to elements based on conditions.

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

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

We can also construct a class name at runtime as shown below.

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

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

Use in AngularNgClass

ngClassIt is a directive used to make the code look more concise, because it is just syntactic sugar. It is convenient and time-saving to use.

ngClassIt has a wide range of uses. So let's check how to use it ngClassas shown below.

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

ngClassIt also helps us to add multiple class names 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 the condition as shown below.

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

As shown in the figure 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 ClassNameand ngClass. We also learned to add dynamic, static or multiple classes using Angular directives.