How to create angular library using Angular 12 -part 2

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

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

ng generate pipe ellipsis --project=my-lib

Custom pipe creation

ellipsis.pipe.ts

Next step to register the pipe 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 ellipsis pipe to shortened the content with specified length. The transform method will take two parameters, first parameter is used to pass the value that is being formatted and the second parameter is list of parameters/ arguments passed into our pipe.

ellipsis.pipe.ts

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

ng build --project=my-lib

After successful build, use the pipe in angular application.

app.component.html

app.component.ts

To serve the angular application by using following command.

ng serve --project=my-app

Output

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

Source Code

Download here