Skip to content

Automatically show loader for router events

T edited this page Mar 16, 2020 · 3 revisions

8. Automatically show loader for router events

8.1 Usage

If you want the loader to start automatically for navigating between your app routes, in your root AppModule, do as follow:

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

import { AppComponent } from './app.component';

import { NgxUiLoaderModule, NgxUiLoaderRouterModule } from  'ngx-ui-loader';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgxUiLoaderModule, // import NgxUiLoaderModule
    NgxUiLoaderRouterModule, // import NgxUiLoaderRouterModule. By default, it will show foreground loader.
    // If you need to show background spinner, do as follow:
    // NgxUiLoaderRouterModule.forRoot({ showForeground: false })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

8.2 Parameters of forRoot() method

Parameter Type Required Default Description
exclude string[] optional null The loader is not showed when navigating to paths that start with these strings. Upper/lower case differences will be ignored.
excludeRegexp string[] optional null An array of regexp strings. The loader is not showed when navigating to paths that match these regexps. Upper/lower case differences will be ignored.
loaderId string optional master Specify the loader id which will showed when navigating between app routes. By default, loaderId = DefaultConfig.masterLoaderId
showForeground boolean optional true If true, foreground loader is showed. Otherwise, background loader is showed.