Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 Material Spinner is not working

Angular 5 Material Spinner is not working

app.module.ts

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@NgModule({
  imports: [
    MatProgressSpinnerModule
  ]})

component.ts

import { MatSpinner } from '@angular/material';

component.html

<mat-spinner></mat-spinner>

am I missing any configuration.?

In Reference, it's generating an SVG file for Spinner but I don't see anything inside mat-spinner tag.

like image 715
Developer Avatar asked Feb 12 '18 05:02

Developer


3 Answers

I tried to fork the mat-spinner example given and that works perfectly. The only difference that I could see is the way you import the progress spinner module instead of importing it from a specific path do this:

  import { MatProgressSpinnerModule } from '@angular/material';

You don`t need to import anything inside your component as mat-spinner extends matprogressSpinner.

Inside the relevant html just do what you were doing i.e.

<mat-spinner></mat-spinner>

You can have a look at this: https://stackblitz.com/angular/eymjpelkpro which might give you some more context.

like image 167
Manit Avatar answered Nov 20 '22 06:11

Manit


[mode]="determinate" << This will only show the circle but will not spin!

To

[mode]="'determinate'" // <<<< single quote for constant value

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Also as mentiond by deanwilliammills, mode = "determinate"

like image 17
hbthanki Avatar answered Nov 20 '22 06:11

hbthanki


The key here for me was to import BrowserAnimationsModule. I'm using angular 10

inside your app.module.ts file import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

inside imports array put BrowserAnimationsModule .

like image 7
canbax Avatar answered Nov 20 '22 05:11

canbax