Applying multiple directives to the same element using the Directive Composition API

In this recipe, you'll use the Directive Composition API to create multiple components and applying directives to them directly for reusability instead of having to apply the directives to each component. Or to create additional elements inside the components template to apply the directives.

Getting ready

The app that we are going to work with resides in start/apps/chapter02/ng-directive-comp-api inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-directive-comp-api to serve the project

This should open the app in a new browser tab and you should see the following:

Figure 2.11 – ng-directive-comp-api app running on http://localhost:4200

How to do it…

1. First off, we'll create a couple of components for our application. We'll create one directive for the filled...