Angular 6 Slim Loading Bar

In this post Angular 6 Slim Loading Bar, we introduce about how to add loading bar in Angular application. We have a delay between the moment when we navigate to a route, and the moment that our component is displayed. If we use loading bar to notify the user that something is happening in the background can greatly improve the User Experience.

Now, let’s create a simple angular application with a slim loading indicator.

Add Navigation

Add the navigation to navigate between the different routes (here is “create” and “index”) in an Angular application

Add Angular Routing Progress Indicator
RxJS 6 is mostly used in Angular apps, and starting with Angular 6, it’s a mandatory dependency there. So we need to install one library called rxjs-compat.

The goal of this article is to show you how to display a loading indicator when navigating from one route to another. So we install the ng2-slim-loading-bar library.

We have to register this module inside an app.module.ts file.

Then, import the styles of ng2-slim-loading-bar inside src>>styles.css file.

Now, we implement how loading bar works in our application by using the following code inside an app.component.ts file.

Finally, We need to add directive in the app.component.html file

Save the changes, and we back to the browser and see the routing indicator when we do click on the navigation bar “Create Product” or “All Products”.

Angular 6 Slim Loading Bar

That’s all about the post Angular 6 Slim Loading Bar.

References
Angular – Routing & Navigation

Download the complete source code, click link below

Angular6SlimLoadingBarApp.zip (3 downloads)

Leave a Comment

*

Please share it if you found this useful
Hide Buttons