how to set text inside md-progress-spinner in Angular-4

Question

In Angular-4 I am setting progress spinner like that

 <md-progress-spinner [color]="color" [mode]="mode" [value]="value" aria-label="Rating">Rating</md-progress-spinner>

and the values in ts:

  color = 'warn';
  mode = 'determinate';
  value = 50;
  showText='Rating';

But I want to set some text inside the progress bar, I try to use angular-2 method but its not working in Angular-4 can anybody please tell me how its done in Angular-4

Angular-2 approach is to set [showText]='showText'

Solution 1

This feature in not available in Material. You need to create it manually. You can place the <mat-progress-spinner> inside a <div> and add another <div> inside that to display the text and adjust position manually:

<div>
    <mat-progress-spinner [color]="color" 
                        [mode]="mode" 
                        [value]="value" 
                        aria-label="Rating">
    </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;">Rating</div>
</div>

Link to stackblitz demo.

Solution 2

Here is a better solution if you are using bootstrap 4 in your project

<div class="card border-0" [style.width.px]="185">
   <mat-progress-spinner [color]="'warn'" [mode]="'determinate'" [strokeWidth]="18" [diameter]="185" [value]="56" class="card-img">
   </mat-progress-spinner>

   <div class="card-img-overlay d-flex justify-content-center align-items-center p-0">
     <div class="card border-0 bg-transparent" [style.width.px]="135">
        <mat-progress-spinner [color]="'primary'" [mode]="'determinate'" [strokeWidth]="7" [diameter]="135" [value]="100" class="card-img">
        </mat-progress-spinner>

        <div class="card-img-overlay d-flex justify-content-center align-items-center p-0">
           <h1 class="letter-spacing text-muted text-center font-weight-normal">
              56%
              <h6 class="text-uppercase">
                 <small class="letter-spacing-2 font-weight-500">increase</small>
              </h6>
           </h1>
        </div>
     </div>
   </div>
</div>