In this guide, we will learn about Angular's ngClass
directive.
You will get a brief idea of the semantics and syntax of ngClass
, and we'll also have a look at the Angular source code and observe how ngClass
works under the hood.
You can use the ngClass
directive to conditionally apply one-to-many classes or styles to an element, giving you an effective way to operate with multiple classes or styles at once.
You may find other alternatives with some drawbacks.
For example, with Angular's class binding, a only single class can be conditionally applied at a time.
Native style and class attributes statically apply one-to-many classes or styles.
Whenever you employ NgClass
and NgStyle
over Angular's class and style bindings or the native attributes, consider the following points:
1. Are you applying one or many classes or styles?
2. Are you applying classes orstyles in a static manner or dynamically?
1<!-- Native Class/Style attributes -->
2 <input class="is-warning my-button" style="border: none; color: blue">
3
4 <!-- Angular class and style Bindings -->
5 <input [class.is-warning]="booleanProp" [style.border]="borderProp">
6
7 <!-- ngClass -->
8 <input [ngClass]="{'is-warning': booleanProp, 'myButton': true}">
9 <input [ngClass]="isWarningBtn">
10
11 <!-- ngStyle -->
12 <input [ngStyle]="{'border': borderProp, 'color': colorProp}">
13 <input [ngStyle]="hasColorBorder">
14
15 <!--
16 booleanProp, borderProp, etc...
17 would be properties from our
18 Typescript class
19 -->
You can combine conditional styling with Angular's property and event binding by using NgStyle
and NgClass
directives using the Angular template syntax.
NgClass
can obtain input via inline declarations, or a property or method from TypeScript class. You may think that the syntax is more complex than it really is. Ultimately, NgClass
can take the following as input:
• Space delimited string
[ngClass]="is-info-element is-item has-no-border"
• Array of Strings
[ngClass]="['is-info-element', 'is-item', 'has-no-border'"]
• Object
[ngClass]="{'is-info-element': true, 'is-item': true}
All previous examples are inline and you can replace these with a Typescript property or method as long as the expression returns valid input.
1export class MyComponentClass {
2 myStringProperty = "is-info is-item has-border";
3 myArrayProperty = ['is-info', 'is-item', 'has-border'];
4 myObjectProperty = {'is-info': true, 'is-item': true};
5}
• [ngClass]="myStringProperty"
• [ngClass]="myArrayProperty"
• [ngClass]="myObjectProperty"
Ternary statements are valid input as long as they return a valid string, object, or array.
For example:
[ngClass]="name === 'erxk' ? 'is-author' : 'is-reader'
Below is an example of how to use NgClass
.
1<button type="button" class="big-font" [ngClass]="klassStyler">Submit</button>
2
3 <div>
4 <label for="one">Terms of Service</label>
5 <input #one id="one" type="checkbox" (change)="updateTos(one.checked)">
6
7 <label for="two">Send Usage Information</label>
8 <input #two id="two" type="checkbox" (change)="updateUsage(two.checked)">
9 </div>
Below is the component javascript:
1export class StatusButtonComponent implements OnInit {
2
3 tosSign = false;
4 sndUsage = false;
5
6 // [ngClass]="klassStyler"
7 klassStyler = {
8 warning: false,
9 info: false,
10 error: !this.tosSign,
11 success: this.tosSign,
12 }
13
14 // ...
15
16 updateStyle() {
17 this.klassStyler.error = !this.tosSign;
18 this.klassStyler.success = this.tosSign && this.sndUsage;
19 this.klassStyler.warning = this.tosSign && !this.sndUsage;
20 }
21
22 }
Below is the CSS:
1.warning {
2 background: hsl(48, 100%, 67%);
3 border: 5px solid hsl(58, 100%, 67%);
4 color: black;
5 }
6
7 .error {
8 background: hsl(348, 100%, 61%);
9 border: 5px solid hsl(248, 100%, 61%);
10 color: white;
11 }
12
13 .success {
Below are some of the major takeaways from the sample code:
• Your button
element has the NgClass
directive applied to it
.
• Your NgClass
input is klassStyler
from your Typescript class. klassStyler
examines a valid object expression.
• The properties on klassStyler
match the names of the CSS classes in your code.
• NgClass
will append classes, not overwrite. Your button will still have class=" big-font"
applied to it.
• You're updating the CSS classes on HTML Element in your Typescript class.
We have looked at using the ngClass
Angular directive to fulfill conditional styling with multiple classes. We used Angular's property and event binding for this use case.