Why mat-spinner not showing?

Question

Why mat-spinner not showing?

8k Views Asked by AudioBubble At 20 October 2024 at 08:32

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

Original Q&A

There are 2 best solutions below

shreeramaute On 19 November 2022 at 07:02

I had same issue of not showing mat-spinner in sub-component not in index.html. I am using @angular/[email protected] 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

**Gérôme Grignon** · Accepted Answer

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

Why mat-spinner not showing?

There are 2 best solutions below

Related Questions in ANGULAR

Related Questions in ANGULAR-MATERIAL

Related Questions in ANGULAR-MATERIAL-7

Trending Questions

Popular # Hahtags

Popular Questions