Search⌘ K
AI Features
Home
Courses
Directives and Pipes in Angular

Exercise: The Built-in `NgClass` Directive

Explore how to implement Angular's NgClass directive through exercises using string, array, and object expressions. Learn to apply conditional CSS classes for button components based on input properties like color and warning state, improving your skills in dynamic styling and efficient component design.

We'll cover the following...

An NgClass with a string expression

Now, let’s get ready for a quick task.

Objectives

In this task, we’ll improve a button component from the previous lesson.

There are four classes that can be applied to a button:

  • The app-button class can be used for default styles of any button.
  • The warn-button class styles buttons in red.
  • The primary-button class styles buttons to use primary design colors.
  • The secondary-button class styles buttons to use secondary design colors.

The button itself has two input properties:

  • The color input can take one of
...