...

/

Angular Built-in Attribute Directives - NgClass

Angular Built-in Attribute Directives - NgClass

Learn NgClass built-in attribute directive.

This is the first of three lessons about built-in Angular directives. There are three lessons in this course about attribute built-in directives, which will be followed by three lessons about structural directives. Let’s begin with the NgClass directives.

What is an NgClass

An NgClass is a directive provided to us by Angular, and it’s ready to use in every project in this framework. It’s an attribute directive, which means it modifies the behavior or appearance of the existing elements. As its name suggests, this directive particularly focuses on appearance (the “Class” in NgClass relates to CSS class).

When is it useful?

Before we introduce the actual directive and its syntax, let’s talk about its use casee. In most cases, we can implement styles in a static way, like this:

<button class="app-button">Hello</button>

As we can see, there’s a button with one CSS class applied to it. Let’s imagine that the class represents a base style for the buttons in our application. If we have one more class in our stylesheets, that class could be applied to a button.

 ...