How to create angular library using Angular 12 -part 3

Gangadhara Sirigeri Mathada
2 min readJun 11, 2021

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

--

--