Exercise: The Built-in `NgClass` Directive

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 two options, primary or secondary.
• The warn input can be either true or false.

Our task is to apply these CSS classes to the button so that it works like this:

1. The button should always have the app-button class on.
2. The button should be red when the warn property is true.
3. The button should match a primary design color theme by default and pass primary to the color property.
4. The button should match the secondary design color if secondary is passed to the color property.

Task

Please write the code below: