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.
ng generate directive <custom-directive-name> --project=<project-name> is used to generate directive.
ng generate directive highLightColor--project=my-lib
Next step to register the directive in my-lib.module.ts.
Next step to update the 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.
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.
To serve the angular application by using following command.
ng serve --project=my-app
In next section will see how to publish the angular app including library to firebase.