Why mat-spinner not showing?

Question

Index.html file is:

<body>
    <mat-spinner></mat-spinner>
</body>

App.module file is:

@NgModule({

 imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatProgressSpinnerModule,
        BrowserAnimationsModule
]
})

I see on the page tag <mat-spinner></mat-spinner> but it does not work, no any errors in console

You put spinner in your index.html ? You must put it under angular views — Armen Stepanyan, Aug 03 '20 at 14:43
you can show a spinner with full CSS while Angular is loading. So you don't need Angular to render it... — Random, Aug 03 '20 at 14:48

Gérôme Grignon · Accepted Answer · 2020-08-03T15:23:13.707

2

Angular components can't be rendered on their own inside the index.html file. That's why default AppComponent is bootstrapped through main.ts file.

You should include the mat-spinner inside an Angular Component. If the spinner is meant to be displayed on application boostraping, you must use a custom spinner which can then be included in the index.html :

<app-root><div id="spinner"></div></app-root>

To display a spinner when lazy loading a module on routing, you can listen to router.events in the component containing the <router-outlet>:

loading: boolean;

  constructor(private router: Router) {
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.loading = true;
      }
      if (event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel) {
        this.loading = false;
      }
    });
  }

and display conditionally your spinner :

<mat-spinner *ngIf="loading"></mat-spinner>

here is a stackblitz example (but the spinner isn't displayed as the modules are loaded too quickly) : https://stackblitz.com/edit/angular-ivy-xwd2ta?file=src%2Fapp%2Fapp.component.ts

edited Aug 03 '20 at 15:23

answered Aug 03 '20 at 14:43

Gérôme Grignon

3,859
1
6
18

I try to show spinner until lazy module is loading, when it loaded it replace content – Aug 03 '20 at 14:44
Could I use it like `` – Aug 03 '20 at 14:45
you can't use content projection on the app-root selector as it's declared outside of the angular scope. – Gérôme Grignon Aug 03 '20 at 14:48
How then to use loader for lazy loading modules – Aug 03 '20 at 14:49
you can add it inside the appComponent html file and listen to the router.events in order to catch the NavigationSatr and NavigationEnd event in order to act on a conditional rendering – Gérôme Grignon Aug 03 '20 at 14:49
I have some modules ,and I dont want to duplicate code in each components – Aug 03 '20 at 14:51
Thank you, buu your example dose not hide loader after loaded – Aug 03 '20 at 15:07
1

it does on NavigationEnd => this.loading = false – Gérôme Grignon Aug 03 '20 at 15:09
It always false: `{{ loading }}` when I reload page f5 – Aug 03 '20 at 15:12
You talked about a need on lazy loaded modules ('How then to use loader for lazy loading modules"). This solution is when you route to a lazy loaded route, not on f5 – Gérôme Grignon Aug 03 '20 at 15:15
2

for spinner on application boostraping, you can include it inside the app-root selector : `
– Gérôme Grignon Aug 03 '20 at 15:17

score 1 · Answer 2 · answered Nov 19 '22 at 07:02

I had same issue of not showing mat-spinner in sub-component not in index.html. I am using @angular/cli@14.0.0 i.e. Angular 14.

To resolve this issue, I had to delete node_modules folder and remove @angular/material and @angular/cdk dependencies from package.json (simply uninstall highlighted packges/modules)

there after add them back with command

ng add @angular/cdk@^14.0.0

ng add @angular/material^@14.0.0

the above command will ask

prebuilt themes choose custom
typography choose No
animation choose Yes

ng add because installing these packages with npm install -save @angular/cdk @angular/material won't work

Why mat-spinner not showing?

2 Answers2