Showing dynamic text in spinner angular material

Question

I have a spinner , but I also want some text in the spinner independent of the component. So for example if you are doing a save action, then the spinner will showing: ...saving. But for example if you do a search action. The spinner will showing: ..processing and so on.

I have this as spinner component:

<div *ngIf="(isLoading | async)" class="overlay">
  <div>
    <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;">{{message}}</div>
  </div>
</div>

and ts script:

export class LoaderComponent {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  message = 'Hello there';
  isLoading: Subject<boolean> = this.loaderService.loaderState;
  constructor(private loaderService: LoaderService) {}
}

and then for example I load the spinner in this component: listComponent

   <app-loader ></app-loader>

So I see the spinner but not the message.

So what I have to improve so that the text will also been shown?

And how to make the text dynamically? So that you can put any text message in it?

Thank you

I have it now like this:

<div *ngIf="(isLoading | async)" class="overlay">
  <div>
    <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
    <div style="position:absolute; top: -60px; left: 30px;">{{message}}</div>
  </div>
</div>

export class LoaderComponent {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello there';

  isLoading: Subject<boolean> = this.loaderService.loaderState;
  constructor(private loaderService: LoaderService) {}
}

and this is the css:

.overlay {
  position:fixed;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(74,74,74,.8);
  z-index:99999;
}
 .spinner {
   margin:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

Answer 1

You can pass text values as @Input to your component and use the component as below

I believe you are not able to see it because of css issue. Try making the text position:absolute .

<div *ngIf="(isLoading | async)" class="overlay">
  <div>
    <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
    <div style="position:absolute; top: -60px; left: 30px;">{{message}}</div>
  </div>
</div>

To further debug please create a stackblitz.

<app-loader [message] = "Processing"></app-loader>

Spinner Component

import { Component, Input, OnInit } from '@angular/core';

export class LoaderComponent {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello there'; // Default text will be Hello there but if you pass anything as stated above then it will be replaced.
  isLoading: Subject<boolean> = this.loaderService.loaderState;
  constructor(private loaderService: LoaderService) {}
}

Answer 2

Try to change style position to relative in your html file it should work:

HTML file

    <div *ngIf="(isLoading | async)" class="overlay">
      <div>
        <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
        <div style="position:relative; top: -60px; left: 30px;">{{message}}
</div>
      </div>
    </div>

TS file

export class ProgressSpinnerOverviewExample {
   color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello';
  isLoading = true;
  constructor() {}
}

Answer 3

You can find Working demo here in this StackBlitz Link

You have to use Behavior Subject and service ...

Your app.component.html is..

<mat-toolbar color="primary">Spinner Demo</mat-toolbar>

<div style="margin:1em">  
    <button style="margin:1rem" mat-raised-button color="primary" (click)="spinner('search')">Search</button>
    <button mat-raised-button color="primary" (click)="spinner('Send')">Send</button>
    <button style="margin:1rem" mat-raised-button color="primary" (click)="spinner('Save')">Save</button>
</div>
     <app-search-output ></app-search-output>

Your app.component.ts is...

export class AppComponent  {
  constructor( private serachService: SearchService){
  }
  spinner(term){
    this.serachService.sendData(term);
  }
  ngOnInit(){
  } 
}

Your Service where you can use behaviorSubject as like this...

export class SearchService {
     searchData$: BehaviorSubject<object[]> = new BehaviorSubject<object[]>([{}]);
     constructor() { }
     sendData(term){
         this.searchData$.next(term)
     }
     getData(){
         return this.searchData$.asObservable();
     }
}

Your spinner component HTML is...

 <div style="margin:2em auto; padding:1rem; box-shadow: 1px 2px 7px red; width:50vw">
     <span style="margin:1em; padding:1rem">{{bookData$ |async |json}}</span>
     <mat-spinner style="margin:1em" color="warn" ></mat-spinner>
 </div>

Your spinner.component.ts is ...

export class SearchOutputComponent implements OnInit {
   bookData$;
   constructor(private searchService: SearchService) { }
   ngOnInit() {
        this.bookData$ = this.searchService.getData();
   }
}