How to create angular library using Angular 12 -part 3

In this section, we will see how to create and use the custom directive by using angular library then use it in the angular application.

The command ng generate directive <custom-directive-name> --project=<project-name> is used to generate directive.

ng generate directive highLightColor--project=my-lib

Custom directive creation

high-light-color.directive.ts

Next step to register the directive in my-lib.module.ts.

Updated my-lib.module.ts

Next step to update the public-api.ts

Updated public-api.ts

Now we will add logic to HighLightColorDirective to change the color on mouse over and mouse leave by using HostBinding, HostListener directives.

high-light-color.directive.ts

After updating the core logic of the custom directive. Build the library by using the below command.

ng build --project=my-lib

After successful build, use the custom directive in angular application.

app.component.html

To serve the angular application by using following command.

ng serve --project=my-app

When mouse enter

When mouse leave

In next section will see how to publish the angular app including library to firebase.

Source Code

Download here