Using Angular's ngClass

[00:03] NGclass is an angular directive that allows us to dynamically add CSS classes to our HTML inside of our angular app. I've written the classes that are available to us in our style sheet up here above, so that we have them for reference.

[00:16] We can add the class bold, which will bold the font. We can add the class blue, which will turn the font blue. Or we can add the class italic, which will add the font style of italic. I wanted to go over three different methods of using NGclass inside your angular application.

[00:32] The first one we'll talk about is NGclass with arrays. Switch over to our source code here. We can see that we have NGclass equals, and then we have an array of models attached to the scope of our angular application.

[00:44] In the inputs below, we have NG models style one, style two and style three which are referenced in the NGclass array. What this means is that the value of this input will be inserted into the class attribute of this paragraph element. We can see that in action by coming back over to our website here, and typing it in bold in the first input.

[01:05] We'll see that our example text is bolded. Secondly, if we do blue and then lastly italic, we'll see that all three styles are applied to our sample text. If we were to type in a class that is not listed in our style sheet, we'll see that no effect takes place.

[01:20] To get an idea of what's really happening, let's go ahead and inspect our element and watch how the classes change as we type in different values. So, for example, I'll delete our red and we'll see that it is removed from the class attribute.

[01:31] If I go back in and type italic, italic is added to the class attribute, which is accessible in our style sheet, so the associated changes are made to the sample text.

[01:43] The next method I wanted to go over is NG class with mapping. What this does it allows you to map a value attached to scope to a specific class that you'd like to add. This means that it's important in our NG model here is truthy and in the bold class we'll be added.

[01:59] If important is falsy, then the bold class will not be added. The easiest way to see this in action is using a check box. If we go back to our sample page here and we check the box, we'll see that the text is bolded.

[02:11] If we inspect the element we can actually see that the class bold is present. If we uncheck the box, we'll see that the class bold goes away. We can keep doing this back and forth, as long as the value is truthy then the class will be added.

[02:25] The last thing of all I wanted to go over is NG class with strings. What this does, is rather than mapping where I say I want this value on scope to turn this class on or off, I'm actually saying that I want the class to be the same as the value attached to scope.

[02:41] If I come back to our sample page here and I type in blue, then we know that the blue class will be added and our text will change to blue. If we go ahead and inspect that element, we'll see that the class blue is present. If I come back in here and I type in bold, you'll see that the class bold is added.

[02:59] I can actually type in several classes here, and this string is going to be directly inserted into our class attribute, so all three could be added in one input.