material.module.ts (added a new module)
import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material'; import { MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { MatBadgeModule } from '@angular/material/badge'; import { MatButtonToggleModule} from '@angular/material/button-toggle'; import { MatIconModule} from '@angular/material/icon'; const MaterialComponent = [ MatButtonModule, MatButtonToggleModule, MatIconModule, MatBadgeModule, MatProgressSpinnerModule ]; @NgModule({ imports: [ MaterialComponent, ], exports: [ MaterialComponent ] }) export class MaterialModule { }
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from './material/material.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MaterialModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'GettingStarted'; showSpinner = false; loadData(){ this.showSpinner = true; setTimeout(()=> { this.showSpinner = false},5000); } }
app.component.html
<div> <mat-spinner *ngIf="showSpinner"></mat-spinner> </div> <div><button mat-raised-button (click)="loadData()">Load Data</button></div> <!-- value is the % of the progress bar shown --> <mat-progress-spinner value="40"></mat-progress-spinner> <mat-progress-spinner value="0"></mat-progress-spinner> <mat-progress-spinner value="100"></mat-progress-spinner> <div> <mat-spinner color="primary"></mat-spinner> <mat-spinner color="accent"></mat-spinner> <mat-spinner color="warn"></mat-spinner> </div>
Output :
