PrimeNg progress bar as a custom element in Angular

Hi everyone in this post I will like to share my experience how I used PrimeNg progress bar module to build a custom element.

What do we mean by custom element?

Custom elements are angular elements that are packaged as a part of angular components also known as web components.A custom element creates a customized tag that extends HTML and is created using JavaScript code.

How to create a custom element using progress bar?

In order to create a custom element with progress bar we need to add the progress bar component to our application and than create a custom component on top of it.

Lets get started with step by step guide on how to create a custom component.

In this example I will create a custom element called “task-status”. This task-status will have a component file, html template file and css file.

Below is the code snippet of the component file.

This component file is similar to any other component files of angular.

Here we have added the selector as “task-status” which will be our custom element.

Also templateUrl we are pointing to template page, instead you can add the template inline. In the later case you need to add template instead of templateUrl.

This class has two input variables, status which will display the corresponding status and number which will display percentage of progress.

Below is the code snippet of the template file.

In case, you want to add custom css you can create another separate css file for this component, for that you need to add styleUrl in your component.

Once our custom element that is nothing but custom component is ready , we need to add this custom element to our required component class.

As we are using PrimeNg Dynamic progress bar component in our application to create this custom element we must add PrimeNg Dynamic progress bar module to our app module apart from our custom component.

Below is the code snippet of the app module file.

We have imported PrimeNg ProgresbarModule in order to display the progress bar.

Apart from this we have also added the custom component that we created. Since this is an example I have added both in build component and PrimeNg component in the same app module.

But in real time angular application you even break them down into granular level like creating a SharedCommonModule for adding the custom components and SharedLibModule for adding all the existing lib components. This will help in maintainability and readability

Once this is done you can add your custom element to your required page. In the example we are adding it to app template file.

Below is the code snippet of app HTML file.

As you can see, in this code snippet we are directly adding the custom element .

As a last step we have added the status and value variables to the application component.

Below is the code snippet of the app component file.

Hope this will help the developers who wants to create a custom element in angular.

I am new to angular just trying to share my experiences and open to questions and constructive criticism that will help me to create more valuable resources for other developers.

References : https://primefaces.org/primeng/showcase/#/progressbar