Angular ngclass: A Complete Guide

Read it in 8 Mins

30th Jan, 2023
Angular ngclass: A Complete Guide

A JavaScript framework called Angular.js is used in front-end applications to create dynamic web pages. Single Page Applications are created using it, which Google supports and maintains. Numerous developers worldwide utilize AngularJS, which is open source and free. The front-end component of the MEAN stack is AngularJS. The directives are one comprehensive feature that Angular offers. The usage of the Angular ngClass directive is one such example. Angular ngClass directive allows you to add and delete CSS classes from HTML elements. Classes apply a group of style properties to all elements that use the class. The keys will be the classes, and the value would be a Boolean which tells whether or not to bind the class. As a result, we can use it for multiple classes, unlike class binding. We'll discuss ngClass in this article, along with several usage examples, including simple and complex conditions. If you would like to study Angular in detail, we recommend our Angular online course for beginners.  

What is ngclass in Angular?  

Classes called directives are used to give elements in your Angular applications extra behavior. Use the built-in directives of Angular to control the forms, lists, styles, and user interface. An HTML element is dynamically bound to one or more CSS classes using the ngClass directive. There are three possible values for the ngClass directive: a text, an object, and an array. In the case of a string, it must include one or more class names separated by spaces. It should have key-value pairs, in which the key represents the class added, and the value is a Boolean value to function as an object. Only if the value holds truth will the class be added. As discussed above, it can be an array, a string, or an object, which can make up each element of an array. A DOM element's directives are markers that instruct Angular to change the DOM element and its children or to attach a specific behavior to the element. Most Angular directives begin with the prefix ng-, where ‘ng’ stands for Angular. 

The syntax for the ngClass is: 

<element ngClass="expression"></element> 

How to Use ngClass in Angular?  

The following CSS classes are modified according to the type of expression evaluation: 

  • String - A string is a programming data type used to represent text rather than numbers, similar to an integer and a floating-point unit. The string's CSS classes are added, separated by spaces. 
  • Array - An array is a data structure with a group of elements. The addition of the CSS classes designated as array items. 
  • Object An object is an instance of a class, meaning it belongs to that class. A class specifies the properties and operations that apply to its objects. Variables are CSS classes that get added when the value gives a ‘True’ value. No other value will be able to satisfy the condition. 

Below is the sample for using all three types: 

<element [ngClass]="'1 2'">...</element> 
<element [ngClass]="['1', '2']">...</element> 
<element [ngClass]="{'1': true, '2': true, '3': false}">...</element> 

Get to know more about why to learn angular and check out the best Web Development course to learn other web development languages and frameworks. 

How to Use Angular Ngclass with a Simple Condition?  

The Angular ngClass does not allow if-else statements for conditional rendering. This is because of normal if-else or statements. We need to pass an expression in it. Expressions are all pieces of code that can be evaluated to a value. Expressions can exist anyplace in a program where JavaScript expects a value, such as the arguments of a function invocation, because they produce values. Arithmetic Expressions, String Expressions, Logical Expressions, Primary Expressions, and many other expression kinds are available in JavaScript. A statement is a directive to carry out a particular action. Creating a variable or a function, iterating through an array of components, evaluating code depending on a certain condition, and other similar operations are examples of such actions. Programs written in JavaScript are collections of statements. Statements in JS include conditional statements, loop statements, jump statements, etc. The ternary operator is an expression in JavaScript. Therefore, we can use the ternary operator to accomplish this task as shown below: 

<td [ngClass]="x > 0 ? 'blue' : 'green'">{{ x }}</td> 

How to Work with Object Literals and ngClass?  

A name-value pair list separated by commas and enclosed in curly brackets is a literal JavaScript object. Data is neatly wrapped up and enclosed by object literals. The use of global variables, which can be problematic when integrating code, is reduced. Any data type, including array literals, functions, and nested object literals, may be used as the value of an object literal attribute.  A list of values can be expressed simply by using an array literal. To generate an array literal, simply enclose a list of values, instances, or literals in square brackets. When using object literals, the value denotes whether the class should be applied to the element, whereas the key denotes the class configured for it. For this to function, the value must only be true. The class cannot be created with null, empty, or other values. 

Know more on how to install Angular on windows. 

Angular ngClass and Complex Condition  

As demonstrated below, we can pass a conditional expression as an object key to add numerous conditions. 

Consider a style-binding illustration. If, for instance, we wanted to add a "success" class to a div element while a ticket was in the active stage and an "alert" class when it was in the pending stage, we could do it as follows: 

The syntax for the complex conditions is: 

[ngClass]={className1: condition1, className2 : condition2 } 

Sample code for the complex condition: 

<div class="container"> 
  <div *ngFor="Registrations"> 
    <div [ngClass]="{'alert': registration.resolution=='Pending',  
                    'success' : registration.resolution=='Resolved' }"> 

Examples of Using ngClass  

  • Using styles to indicate the choice that is now being selected from a list: 

We can use ngClass styles to specify the choice that was selected from the list of available options. For instance, a user can select the gender from the given options, which will be highlighted differently. 

  • Establishing styles to indicate the navigation menu item that is now active: We can use ngClass styles for highlighting the option that is currently selected from the menu. For instance, if the user is in the ‘Home’ section of a website, we can mark this text as different from the others. 
  • Creating styles to highlight a specific aspect of an element: We can also use ngClass styles for highlighting specific portions of an element. For instance, a square is divided into four sections and we need to color the section that the user selected, then we can use ngClass for this purpose. 


In this article, we discussed the ngClass directive of Angular, which allows you to add and remove CSS classes from HTML elements. It is an Angular directive. Classes will be the keys, and a Boolean that indicates whether or not to bind the class will be the value. Consequently, unlike class binding, we can utilize it for numerous classes.  We saw how it could be used with arrays, strings and objects, and simple and complex conditions using expressions and not statements. Because all expressions are bits of code that can be evaluated to a value, this is the case. In the end, we also saw real-life examples of this directive. Remember you can check the KnowledgeHut Angular online course 


Simran Kaur Arora

Trainer & Consultant

Experienced Senior Content Developer with a demonstrated history of working in the computer software industry. Enthusiastic and dedicated person in the field of Computer Science. Skilled at my work area and believe in working with passion and work ethics. Have a good understanding of programming languages, operating systems, and databases. I have good communication skills and interested in staying updated with technology and learning new things.

Want to become a sought-after web developer?

Avail your free 1:1 mentorship session.

Your Message (Optional)

Frequently Asked Questions (FAQs)

1What is ngClass in Angular?

By data binding an expression representing all of the classes to be added, the ngClass directive enables you to set CSS classes on an HTML element dynamically. Depending on which of three kinds the expression evaluates, the directive behaves in one of three ways: The string should contain one or more class names that are separated by spaces if the expression evaluates to a string. If the expression results in an object, the associated key is used as the class name for each key-value pair with a truthy value. Each element of the array, if the expression evaluates to an array, should either be a string or an object. 

2Why do we need ngClass in Angular?

The ngClass directive enables you to data bind an expression that represents all of the additional classes to be added to add CSS classes to an HTML element dynamically. 

3What are ngStyle and ngClass in Angular?

You can set the style properties of a particular DOM element with the NgStyle directive. When the value is dynamic, ngStyle is considerably more beneficial. JavaScript expressions that are evaluated and the result utilized as the value of the CSS property can be used as the values in the object literal that we assign to ngStyle. When the value is dynamic, ngStyle is considerably more beneficial. 

You can dynamically set the CSS class for a DOM element with the ngClass directive. 

4How do you use ngClass with an example?

Below is the example that lists people along with their languages with different styles: 

<h4 >Example</h4 > 
<ul *ngFor="List of people"> 
  <li [ngClass]="{ 
    'text-success':person.language === 'English', 
    'text-primary':person.language === 'French', 
    'text-danger':person.language === 'German' 
  }">{{ }} ({{ person.language }}) 
5What is the difference between ngClass and Class?

We can supply an object with class names as the key and corresponding boolean expressions as values if we want to add several classes. Class binding can add or remove a CSS class from an element dynamically.