Primeng Loading Bar

In Angular, it is common practice to execute commands prior routing a page using guards and resolvers. Guards prevent the routing from occuring until the condition turns to true and resolvers prevent the routing from occuring until the data is returned. Those actions can take time to complete and during the time being, the component will not load leaving the user with an impression of unresponsiveness. Today we will see how we can implement a navigation loading bar for Angular using PrimeNG progress bar component.

indeterminate correspond to a progress bar which animates but does not have any definite ending. The official documentation can be found here. If we want to stop the animation, we can set the mode to '' (empty string). So what we can do is to set the mode to indeterminate when navigation is initiated and set it to '' when navigation ends.

We achieve that by subscribing to the router events and filtering NavigationStart and NavigationEnd where we set the mode as indeterminate when navigation starts and '' when it ends. We can then place it just below a navbar so that it looks part of the design.

We also touch slightly on its style by using the class selector :host combined with ::ng-deep to target classes within the component it is defined. If we did not use those selectors, we will not be able to target the classes from PrimeNG due to the mechanism used to isolated style classes from different components.

Conclusion

Today we saw how to create a progress bar for Angular using PrimeNG. We bound the progress bar animation to the navigation of the Angular router and saw how to style a component and component used within it using :host and ::ng-deep. Hope you liked this post, see you next time!