Video Tutorials

Policy

Twitter LogoFacebook Logo
Angular ngClass Directive
Angular ngClass Directive
By: King

The ngClass directive allows us to add or remove CSS classes from our HTML DOM elements. It accepts a string, an array, or an object.

Let’s take a look at how it is used in code. Open your Angular project on VS code. To begin, go to the app component css file. Define 3 css classes.

The first one will be called large-text. It will turn the font size of the elements to 5em.

The second one will be called highlight. It will turn the background-color of our elements to yellow.

And the third will be called green-text. It will make the text color of our elements green.

.large-text {

   font-size: 5em;
}

.highlight {
   background-color: yellow;
}

.green-text {
   color: green;
}

Go to the app component html page. Add a paragraph element and give it some text.

<p>Hello World</p>

To begin using the the ngClass directive, add it to the open tag of the element. Use the compact syntax to set the styles. Wrap it with the square brackets and begin inputting some values. 

Add the large-text class. Because we already have the double quotes, we need to use single quotes to represent a string inside a string. Then we put the class that we want inside. 

<p [ngClass]="large-text">Hello World</p>

Our text should appear larger than normal. Save the project, start the local server, open the browser, and go to localhost:4200.

Image from Codeible.com

As you can see, we have a large text on the screen.

Go back to VS Code. We can add more than one class at a time. Let’s say that we want to apply the green-text class as well. We would put a space and then add green-text to the string. 

<p [ngClass]="large-text green-text">Hello World</p>

Each class is separated with a space. To add another class, we would put another space and then add another class

[ngClass]="large-text green-text highlight"

Save the project and go to the browser.

Image from Codeible.com

As you can see, we got a large green text with a yellow background because we applied the large-text, green-text, and highlight classes to the paragraph.

Instead of doing everything in the HTML page, we can also do it in the TypeScript file. 

Go to the app component TypeScript file. Declare 3 strings to represent the 3 css classes. 

largeText = "large-text";
highlight = "highlight ";
greenText = "green-text";

Declare another string and set the value with the 3 CSS classes. We will use this string to set the styles of the paragraph element in the HTML page.

myStyles = `${this.large-text} ${this.highlight} ${this.green-text}`;

Go to the app component html page. Remove the string from the ngClass directive and replace it with the myStyles variable. 

<p [ngClass]="myStyles">Hello World</p>

Save the project and go to the browser.

Image from Codeible.com

As you can see, we still got the same effect, but this time, we used a variable from the class. We linked the directive with a variable instead of using a static value in the HTML page. This way, when we update the value of the variable and the styles will also update as well. 

Here is what I mean. Go back to VS Code.

Add three buttons. Label them, enlarge, highlight, and green. Attach a click event to each button and give them a function to call.

<button (click)="onEnlarge()">Enlarge</button>

<button (click)="onHighlight()">Highlight</button>
<button (click)="onGreen()">Green</button>

Go to the app component TypeScript file and define the functions.

For the enlarge button, we want to use the large text class.
For the highlight button, we want to use the highlight class
And for the green button, we want to use the green text class.

onEnlarge() {

   this.myStyles = this.largeText";
}

onHighlight() {
   this.myStyles = this.highlight";
}

onGreen() {
   this.myStyles = this.greenText;
}

When we click on each button, it should set the myStyles variable with a CSS Class.

Let’s see what will happen. Save the project and go to the browser.

Click on the enlarge button. Then the green button, then the highlight button.

As you can see, by passing a variable from the class into the ngClass directive, we created a link between the two. So when we update our variable we also update the styles.

Go back to VS Code. Let’s see how we can use arrays.

Locate the myStyles variable. Remove the string and put the empty square brackets. Each class would be a new element in the array. So here, we added the 3 classes.

myStyles = [ this.largeText, this.highlight, this.greenText ]

 Save the project and go to the browser.

Image from Codeible.com

As you can see, the large-text, highlight, and green-text styles are applied. 

You may wonder why we will need to do this when we can just use strings to achieve the same thing. By using arrays, we get all the benefits of an array such as adding or removing a class using the push and splice methods. But there is an even better approach for that.

Go back to VS Code. 

The ngClass directive can also accept objects. This is what makes it is so powerful. First, let’s see how to write it. Replace the array with the curly brackets to indicate that we are assigning an object. 

myStyles = {};

Each item in the object is a key value pair. For the key, we put the class we want and for the value, we put a Boolean value. If it is true, it will add the class to the element and If it is false, it will remove it. To add more classes, we separate each item with a comma.

myStyles = { 'large-text': false, 'highlight': false, 'green-text': false};

Locate the handler functions.

When we click on these buttons, we want our Boolean in the object to toggle between true and false.

The logic for this is simple, take the reference of the object and access the style. Then use the ternary operator to set the value. If the value is true, set it to false, otherwise, set it to true.

onEnlarge() {

   this.myStyles = this.myStyles["large-text"]? false: true;
}

Do the same for the other two functions.

onHighlight() {
   this.myStyles = this.myStyles["highlight"]? false: true;
}

onGreen() {
   this.myStyles = this.myStyles["green-text"]? false: true;
}

So now, when we click on the buttons, it will add or remove the style from our element.

Let’s verify that. Save the project and go to the browser.

Click on the enlarge button. Then the green button. Then the highlight button. If we click on the buttons again, it will remove them. 

As you can see we can control the styles that we want to use for our elements with an object.

There’s another cool feature of using an object. Go back to VS code.

Right now, we are adding and removing one class at a time, but we can group multiple classes together like this. 

myStyles = { 'large-text highlight green-text': false };

Each class is separated with a space. 

Remove the other items in the object and remove the code from the enlarge method.

We want to toggle the set of classes in our object. Grab the object reference and access the set. Then use the ternary operator to toggle the value.

onEnlarge() {
   this.myStyles = this.myStyles["large-text highlight green-text"]? false: true;
}

Save the project and go to the browser.

Click on the enlarge button. Click on it again. As you can see, it added and removed multiple classes at once.

Recap

Let’s take a moment to recap what we have learned.

1. We learned how to use the ngClass directive to add or remove css classes from an element.

2. We learned that it can accept one of the 3 types of values: a string, an array, or an object.

3. We also learned how to use an object to add or remove multiple classes at once by providing multiple classes in a single key.


Sign In