Skip to main content

angular material - How to use indeterminate Progress spinner

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  isTaskRunning:boolean = false;
  message:string = "The task is not run yet.";

  runTask(){
    this.isTaskRunning = true;
    this.message = "Task is running now.";

    // Do the task here
    setTimeout(()=>{
      this.isTaskRunning = false;
      this.message = "Task is finished.";
    },10000);
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to use indeterminate Progress spinner
</h2>


<h4 style="margin-bottom:20px;">
    {{message}}
</h4>

<button 
    mat-raised-button color="primary" 
    [disabled]="isTaskRunning"
    style="margin-bottom:20px;"
    (click)="runTask()">
        Run Task
</button>

<mat-progress-spinner 
    mode="indeterminate" 
    *ngIf="isTaskRunning"
    color="warn">
</mat-progress-spinner>
app.module.ts [import] 

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
import {MatButtonModule} from '@angular/material/button'
More Angular tutorials
Labels: