Exercise: Passing Values to the Custom Attribute Directive

Let’s practice passing values to the directive.

We'll cover the following

It’s time to practice!

Objectives

We want to implement a directive that can be applied to change the apprearance of buttons while adhering to the following requirements:

  • Create a directive that applies to the appButton selector.

  • The directive should take one of these two color modes:

    • The primary mode should change the background color to blue and the font color to white.

    • The secondary mode should change the background color to yellow and the font color to black.

After the directive takes either primary or secondary, the color mode property should be able to bind using a single attribute with the appButton. `

  • The directive should take another value which is the size provided in px. It should also follow these parameters:

    • By default, the button should have a 120px width.

    • If a value is provided, it should be set as a new width.

Task

Please write the code below:

Get hands-on with 1200+ tech skills courses.