Can You Add Colleges to Css Profile After Submitting

ngClass is a directive in Angular that adds and removes CSS classes on an HTML element. In this article, nosotros are talking most ngClass in Angular only, not ng-class in angular.js.

Prerequisites – What is Property Binding?

Two things nosotros take to understand first are belongings binding and interpolation in Athwart. Let'due south take the placeholder attribute of input as an case.

Consider the following lawmaking:

                <!-- Normal HTML --> <input placeholder="some text">  <!-- Interpolation --> <input placeholder="{{ variable }}"> <!-- Property Binding --> <input [placeholder]="variable">              

Given that we have variable = 'some text' defined in the component, then all the above code will exercise exactly the same thing.

I would consider interpolation ({{ }}) as an eval. And property binding is just a less verbose way to reach the same thing. Personally, I utilize belongings binding equally much as I can.

What is ngClass in Angular? The Basics

When information technology comes to ngClass, it supports iii types of expression "render values": Cord, Array, and Object. Hither is an example from the official documentation:

                <div [ngClass]="'first second'"> <div [ngClass]="['commencement', '2d']"> <div [ngClass]="{first: true, 2nd: true, tertiary: true}"> <div [ngClass]="{'first second': true}">              

All div elements above have ii classes: showtime and second. Note that in the official documentation, in that location is a pair of single quotes in each of the object keys in the third example. But neither first nor second has a dash or space in it. So we tin can experience gratis to remove the quotes.

In the fourth example, however, since the key is commencement second (which has a space in between) we need to add the single quotes.

Only a heads upwards – the value of ngClass doesn't have to be a literal, every bit shown higher up. Keep in mind that holding binding evaluates its expression. Then as long equally the expression tin can be interpreted as String/Assortment/Object, we are good to become.

How to Use ngClass in Angular

And so what is an expression? Normally, an expression is something that represents a value, and a statement would do something without a render value. You lot're probable familiar with if statements, which are responsible for the control flow. Notation that if statements don't have a return value.

On the other hand, say, num + x is an expression (given that num has a value like i) and information technology has a "return value" of 11.

In ECMAScript, assignment is also considered to be an expression and information technology does have a "return value". Simply we can't put an consignment expression in the property binding in Angular, which will throw an error saying that "Bindings cannot contain assignments".

That being said, all the following [ngClass]es are valid:

                <!-- Given that val="foo", the class of the following div would exist "foofoo" --> <div [ngClass]="val + val">  <!-- Given that val="foo", the class of the following div would exist "foo" --> <div [ngClass]="[val]">  <!-- Given that func is a function that returns "foo", the form of the post-obit div would be "foo" --> <div [ngClass]="func()">              

How to Utilize Angular ngClass with a Simple Condition

We can't write an if statement in ngClass, due to the fact that information technology is a statement. But we tin't use a ternary operator since this is an expression.

For example, if nosotros want the text in a tabular array prison cell to have a class of red when its value is larger than 10, and if not it should have a class of green, here is the lawmaking:

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

And if nosotros desire to toggle a class based on a status, we could make one of the expressions an empty string.

For case, if we want to add together an error class in a form when it is invalid, and to remove the error class when it is valid, we could exercise this:

                <input type="text" [ngClass]="control.isInvalid ? 'error' : ''" />              

But there is a less verbose way. Remember ngClass also supports an object as a value:

                <input type="text" [ngClass]="{ error: control.isInvalid }" />              

Another fashion to achieve the same thing is to use class bounden. This is platonic for a unmarried course:

                <input type="text" [course.error]="command.isInvalid" />              

How to Work with Object Literals and ngClass

When we use object literals, the cardinal represents the grade that we are going to configure for the element, while the value represents whether the form should be practical to the element.

Note that the cardinal will be applied only when the value is truthy. In the above example, if coltrol.isInvalid is one of faux, undefined, '', and then on, then the class of error will not employ to the chemical element.

One more matter to note is that the computed property proper name syntax is not yet supported. But there is an open consequence in the Angular official GitHub repo.

Angular ngClass and Complex Weather condition

What if the condition is more than just true/false? Say we need different class names when val is 0-v, six-x and >= 11, which you can easily stand for with an if/else statement:

                if (val >= 0 && val <= 5) {   return 'low'; } else if (val >= 6 && val <= 10) {   render 'medium'; } else {   render 'loftier' }              

As mentioned to a higher place, we can't use an if/else statement in ngClass. Merely await, function is a valid expression with a return value, and nosotros can utilise an if/else statement in a function:

                form MyComponent {   getClassOf(val) {     if (val >= 0 && val <= 5) {       render 'low';     } else if (val > five && val <= x) {       return 'medium';     } else {       return 'high'     }   } }              

                <td [ngClass]="getClassOf(val)">{{ val }}</td>              

So far and so adept. But I'd like to indicate out that this is really not ideal. Long story short, due to how ChangeDetection works in Athwart, the above function getClassOf might run multiple times, even when we consider information technology unnecessary.

That is style beyond the topic of this article, simply you may check out this article if you'd like to know more.

We can still achieve the aforementioned result without using a part. With an object literal it looks like this:

                <td [ngClass]="{ low: val >= 0 && val <=5, medium: val > five && val <= 10, high: val > x}">   {{ val }} </td>              

Looks a bit verbose. Consider that at that place will be only one class applied to the element, and then if we can transform our val first, that's ideal:

                type ClassName = 'depression' | 'medium' | 'loftier';  course MyComponent {   className: ClassName = 'low';      ngOnChanges(changes: SimpleChanges) {     if (changes.val) {       className = mapValToClass(changes.val.currentValue);     }   }      private mapValToClass(val: number): ClassName {     if (val >= 0 && val <= five) {       render 'low';     } else if (val > 5 && val <= 10) {       return 'medium';     } else {       return 'loftier'     }   } }              

And all we demand to practise in the template is:

                <td [ngClass]="className"></td>              

In that location are some cases when we can employ array. Consider the following mapping relationship:

                {   1: 'first-element',   ii: 'second-element',   3: 'third-element', }              

This means that for a val that is 1, the grade of the element volition be offset-element. When we see consecutive numbers such as 1, 2 and 3, then we can consider using an assortment. This is considering by subtracting 1 from each value, we get 0, i and 2, which are merely the indices of an array:

                type Val = i | two | 3;  class MyComponent {   classArr = ['first-element', '2nd-element', 'third-element'];   val: Val = 1; }              

                <td [ngClass]="classArr[val - ane]"></td>              

A fun fact is that in ECMAScript, an array is merely an object with quite a few actress properties and methods. So you can do the above with an object as well:

                type Val = i | ii | 3;  grade MyComponent {   classMap = {     1: 'get-go-element',     2: '2d-element',     iii: 'tertiary-element',   }   val: Val = one; }              

                <td [ngClass]="classMap[val]"></td>              

Note that you lot tin also achieve the above with nested ternary operators, which is something I always try to avoid.

[ngClass] vs [class] in Angular

Before nosotros wrap up, one matter worth mentioning is [class] notation. This is available starting from Ivy, which was introduced in Angular 9 as the default compiler and runtime.

The [class] is almost backward-uniform with [ngClass], with some discrepancies:

1. [ngClass]="{'a b': true}" does work, only [class]="{'a b': true}" won't work. See this open issue.
2. The value of [class] is not "deepwatched". Run across here.

Conclusion

Cheers for reading! Hopefully now you lot know how ngClass works and can use it with confidence.

---

---

Learn to code for costless. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

kemptonbunecand.blogspot.com

Source: https://www.freecodecamp.org/news/angular-ngclass-example/

Share this post