Как правильно добавить метку арии к mat-progress-bar в угловом материале 8?

Question

Я создаю индикатор выполнения, используя угловой материал версии 8, и хочу добавить к нему метку арии, чтобы при наведении на нее показывалось значение и описание индикатора выполнения

Answer 1

Вам нужно будет использовать matTooltip, чтобы увидеть значение и описание.

Попробуйте:

<mat-progress-bar 
  name="label"
  mode="determinate" 
  [value]="value"
  attr.aria-label="Progress - {{ value }} %"
  matTooltip="Progress - {{ value }} %">
</mat-progress-bar>

И в вашем классе компонентов:

import {Component} from '@angular/core';

/**
 * @title Determinate progress-bar
 */
@Component({
  selector: 'progress-bar-determinate-example',
  templateUrl: 'progress-bar-determinate-example.html',
  styleUrls: ['progress-bar-determinate-example.css'],
})
export class ProgressBarDeterminateExample {
  value = 0;
  intervalId;

  ngOnInit() {
    this.intervalId = setInterval(() => {
      if (this.value < 100) this.value = this.value + 20;
    }, 5000);
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */