Automatic page loading/progress bar for Angular
Tags: angular, webdev, beginners
Published: 2020-03-15 13:38:33

<h1></h1>   
## :small_orange_diamond: Introduction

Today I come to show you a library that helps us show a progress bar, which will be shown in every http request we make on our Angular website, I consider this functionality essential since it is a very visual way to show the progress of loading of the request to the user of our website.

## :small_orange_diamond: Installation

```
  # if you use `@angular/common/http`
  npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save

  # if you use `@angular/router`
  npm install @ngx-loading-bar/core @ngx-loading-bar/router --save

  # to manage loading-bar manually
  npm install @ngx-loading-bar/core --save

```

## :small_orange_diamond: Import @ngx-loading-bar packages

We must import the packages previously installed in our ``app.module.ts``.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// for HttpClient import:
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';

// for Router import:
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';

// for Core import:
import { LoadingBarModule } from '@ngx-loading-bar/core';

import { AppComponent } from './app';

@NgModule({
  ...
  imports: [
    ...

    // for HttpClient use:
    LoadingBarHttpClientModule,

    // for Router use:
    LoadingBarRouterModule,

    // for Core use:
    LoadingBarModule
  ],
})
export class AppModule {}
```


## :small_orange_diamond: Add to your app component
Use your ``ngx-loading-bar`` in your ``app.component.html`` template:

```html
<ngx-loading-bar color="#CD67BA" height="4px"></ngx-loading-bar>
```


## :small_orange_diamond: Demo in my portfolio

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gqbdhqf6gacn4wh4eemb.gif)

Show more in me [Portfolio](https://susomejias.es/inicio).

## :small_orange_diamond: Customize with the following entries

| Input          | Description                                                    |
| -------------- | -------------------------------------------------------------- |
| color          | The color of loading bar. Default value is `#29d`.             |
| includeSpinner | Hide or show the Spinner. Default value is `true`.             |
| includeBar     | Hide or show the Bar. Default value is `true`.                 |
| height         | The height of loading bar. Default value is `2px`.             |
| diameter       | The diameter of the progress spinner. Default value is `14px`. |
| fixed          | set loading bar on the top of the screen or inside a container. Default value is `true`. |
| value          | Set the value of the progress bar.                             |
| ref            | Select the ref of a loading bar instance to display (`http`, `router`, ...)  |

## :small_orange_diamond: Ignoring particular requests

#### http-client:
Http client doesn't allow passing [custom option](https://github.com/angular/angular/issues/18155), in order to achieve that we made a temporary solution (by passing the option throught the header) that will be removed once http-client come with a proper solution.

```ts
// ignore a particular $http GET:
httpClient.get('/status', {
  headers: { ignoreLoadingBar: '' }
});
```

#### router:

- using the `router.navigateByUrl()` method:

```ts
this.router.navigateByUrl('/custom-path', { state: { ignoreLoadingBar: true } });
```

- using the `routerLink` directive:

```html
<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>
```
   
## :small_orange_diamond: Source and more information on __ngx-loading-bar__

GitHub ``ngx-loading-bar`` repo [here](https://github.com/aitboudad/ngx-loading-bar).

<br/>
Thanks for reading me. 😊