Как изменить автоматически сгенерированный <svg> из углового материала

Я использую <mat-progress-bar> следующим образом:

<mat-progress-bar
        name = "label"
        mode = "buffer"
        [value] = "percentage"
        [bufferValue] = "percentage + 10"
      >
</mat-progress-bar>

И он генерирует следующий HTML:

<svg width = "100%" height = "4" focusable = "false" class = "mat-progress-bar-background mat-progress-bar-element">
    <defs>
      <pattern x = "4" y = "0" width = "20" height = "4" patternUnits = "userSpaceOnUse" id = "mat-progress-bar-82">
        <circle cx = "2" cy = "2" r = "2"></circle>
      </pattern>
    </defs>
    <rect width = "100%" height = "100%" fill = "url(whatever)"></rect>
</svg>

Дело в том, что я хочу изменить атрибуты width и r, для этого я написал что-то вроде:

const patterns = document.getElementsByTagName("pattern")
this.renderer.setAttribute(patterns[0],"width",this.width);

который работает, НО сам angular каким-то образом заменяет атрибуты на его значение по умолчанию после одного «тика»

Мой вопрос: как я могу связать атрибуты width и r из этого автоматически сгенерированного svg? или событие не позволяет Angular обновлять атрибуты

Я ищу что-то вроде:

<mat-progress-bar 
        ...
        [attr.svg.defs.pattern.width] = "width"
></mat-progress-bar>

Я также пытаюсь расширить matProgressBar, но я не знаю, где устанавливаются значения этих атрибутов.

не могу найти ничего похожего

ОБНОВЛЕНИЕ. В stackblitz все работает, как и ожидалось, теперь я еще больше запутался, чем раньше.

@Component({
  selector: 'progress-bar-configurable-example',
  template: `
      <mat-progress-bar
      class = "example-margin"
      [mode] = "'buffer'"
      [value] = "value"
      [bufferValue] = "value + 10"
    >
  </mat-progress-bar>`,
  styleUrls: ['progress-bar-configurable-example.css'],
})
export class ProgressBarConfigurableExample implements AfterViewInit {

  value = 50;
  bufferValue = 70;

  constructor(private renderer: Renderer2){}

  ngAfterViewInit(): void {
    const patterns = document.getElementsByTagName("pattern")
    this.renderer.setAttribute(patterns[0],"width","30");

    setTimeout( ()=> this.value = this.value+20 , 1000)
    }
}

angular svg angular-material

25.11.2022 16:48

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, я нашел проблему. *ngFor обновляет <mat-progress-bar>, и я устанавливал его атрибуты только в onAfterViewInit. Исправление что-то вроде

@Component({
  selector: 'progress-bar-configurable-example',
  template: `
    <div #progressBars *ngFor = "let o of bars">
      <mat-progress-bar
      class = "example-margin"
      [mode] = "'buffer'"
      [value] = "value"
      [bufferValue] = "value + 10"
    >
  </mat-progress-bar>
  <br/>
  </div>`,
  styleUrls: ['progress-bar-configurable-example.css'],
})
export class ProgressBarConfigurableExample
  implements AfterViewInit
{
  value = 10;
  bufferValue = 70;
  bars = [{}, {}];
  @ViewChildren('progressBars') progressBars: any;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {

    this.progressBars.changes.subscribe(t => {
      const patterns = document.getElementsByTagName('pattern');
      this.renderer.setAttribute(patterns[0], 'width', '30');
    })
  }
}

Как видите, главное подписаться на изменения в @ViewChildren и снова установить атрибуты.

Спасибо

25.11.2022 18:03