Loader In Angular Material

The Code Points September 04, 2022 0

In this article, we will learn how to add progress-spinner of Angular Material into the application. An Angular Material component called the Progress-spinner is used to display signs of activity and progress.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new Angular-Loader

Now, we need to install the Material UI framework using the following command in the terminal.

npm install --save @angular/material @angular/cdk @angular/animations

Now, add the MatProgressSpinnerModule and BrowserAnimationsModule module in the app.module.ts file using the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations";
import { MatProgressSpinnerModule } from @angular/material/progress-spinner';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatProgressSpinnerModule,
	BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, Add any of the following themes to the styles.css file.

~@angular/material/prebuilt-themes/deeppurple-amber.css
~@angular/material/prebuilt-themes/pink-bluegrey.css
~@angular/material/prebuilt-themes/purple-green.css
~@angular/material/prebuilt-themes/indigo-pink.css";

Here, I am using the purple-green theme, so import the styles.css file as seen below.

@import "~@angular/material/prebuilt-themes/purple-green.css";

Now, we need to create Interface for loader state using the following command.

ng g interface LoaderState

Now, add the following code under the LoaderState interface file.

export interface LoaderState {
    show: boolean;
}

Now, Using the following command we need to create a Loader service to manage loader hide and show state.

ng g s Loader

Now, add the following code under the Loader service file.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { LoaderState } from './Loader-State';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {

  private loaderSubject = new Subject<LoaderState>();
  loaderState = this.loaderSubject.asObservable();
  constructor() { }

  show() {
    this.loaderSubject.next(<LoaderState>{ show: true });
  }
  hide() {
    this.loaderSubject.next(<LoaderState>{ show: false });
  }
}

Now, we need to create loader component using the following command.

ng g c loader

Now, add the following code under the loader.component.html file.

<div class="progress-loader" *ngIf="loading">
    <mat-progress-spinner [mode]="'indeterminate'">
    </mat-progress-spinner>
</div>

Now, add the following code under the loader.component.css file.

.progress-loader{
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    z-index: 999;
    background-color: rgba(0,0,0,0.3);
}

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #665b7d;
}

Now, add the following code under the loader.component.ts file.

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { LoaderService } from '../loader.service';
import { LoaderState } from '../Loader-State';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {

  loading = false;
  private subscription: Subscription;

  constructor(private loaderService: LoaderService) { }

  ngOnInit() {
    this.subscription = this.loaderService.loaderState
      .subscribe((state: LoaderState) => {
        this.loading = state.show;
      });
  }
}

Now, add the following code under the app.component.ts file.

import { Component } from '@angular/core';
import { LoaderService } from './loader.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular8Loader';


  constructor(private loaderService: LoaderService) {
  }

  show() {
    this.loaderService.show();
  }

  stop() {
    this.loaderService.hide();
  }

}

Now, add the following code under the app.component.html file.

<app-loader></app-loader>
<button (click)="show()">Start</button>&nbsp;
<button (click)="stop()">Stop</button>
<router-outlet></router-outlet>

Now, run the application using the ng serve command into the terminal and see the browser screen, now click on start button then we are able see loader on our screen. 

Conclusion

In this article, we learned how to add progress-spinner of Angular Material into the application using the Angular Material UI framework.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.