Angular Материал Stepper, Dynami c изменение цвета - PullRequest
Новая
       15

Angular Материал Stepper, Dynami c изменение цвета

0 голосов
/ 04 февраля 2020

Я пытаюсь использовать шаговый манипулятор angular для отслеживания прогресса (я знаю, что он не предназначен для этого ... но это единственное, что соответствует моим требованиям). У меня есть 5 шагов в моем степпере.

Я хочу включить цвет, когда товар или товар достигнет этой точки. Я нашел класс mat-step-icon-selected для него. Но это не работает.

Я получу данные из API, который вернет мне номер статуса / шага. и исходя из этого мне нужно повернуть цвет.

Я не могу изменить цвет класса. Я пытался использовать ngClass на mat-step Но это не работает.

Это мой код: 

 <mat-horizontal-stepper [linear]="true">

    <mat-step>
        <ng-template matStepLabel >
          Initiated          
        </ng-template>
    </mat-step>
    <mat-step [className]="isTrue ? 'mat-step-icon-selected' : ''">
        <ng-template matStepLabel>PM</ng-template>
    </mat-step>
    <mat-step #stepper>
      <ng-template matStepLabel>HM</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>BU</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>FT</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

Предложите решение для обновления цвета отображаемого степпера.

Спасибо:)

1 Ответ

1 голос
/ 04 февраля 2020

Добавьте это в файл css вашего компонента: 

:host ::ng-deep .mat-step-icon-selected {
    color: green; // your styles
}

Чтобы установить шаг динамически, попробуйте так:

.ts 

import { MatStepper } from "@angular/material";

@ViewChild("stepper") private stepper: MatStepper;

selectStep(index) {
    this.stepper.selectedIndex = index;
}

. html

<mat-horizontal-stepper [linear]="true" #stepper>
  ...
</mat-horizontal-stepper>
...