текст внутри мат-прогресс-бара в угловом материале

Question

В mat-progress-bar я должен отображать текст внутри индикатора выполнения, а не какой-либо другой процент.Может ли кто-нибудь помочь отобразить текст внутри индикатора выполнения?

<mat-progress-bar mode="determinate" class="progress-bar" [color]="color " [value]="progress" ></mat-progress-bar>

Answer 1

Я не думаю, что вы можете настроить существующий индикатор хода выполнения, вам нужно придумать свой собственный способ его реализации, добавив div с вашим собственным стилем следующим образом:

<mat-progress-spinner
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value">        
    </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;"> Loading </div>
 </mat-card-content>

STACKBLITZ DEMO

Answer 2

Вы можете использовать css для этого.Таким образом, ваш контент будет всегда в централизованном индикаторе выполнения .Единственным условием является то, что width и height из mat-progress-spinner совпадают с родительским div:

<div style="position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
  <mat-progress-spinner style="width: 100px;height: 100px;position: absolute;top: 0;left: 0;" [color]="'primary'" [mode]="'determinate'" [value]="60">
  </mat-progress-spinner>
  <h1 >69%</h1>
</div>

Answer 3

Вам нужно создать его вручную, поскольку он недоступен в материале 2.x

Решение:
Вы можете поместить <md-progress-spinner> внутри <div> и добавитьеще один <div> внутри, чтобы отобразить текст и отрегулировать положение вручную.

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

Я надеюсь, что это разрешит ваш запрос.

Рабочий пример: Это может помочь вам, я нашел только на SO