Угловой шаговый индекс материала

#angular #angular-material #angular-material-stepper

Вопрос:

у меня возникли проблемы с изменением класса, как только я нажимаю на шаг шагового устройства. Кто-нибудь знает, как создать динамический класс, например, после изменения индекса шага ?

Комментарии:

1. Не могли бы вы, пожалуйста, объяснить немного подробнее? На каком элементе вы меняете класс? Вы хотите, чтобы он менялся в зависимости от выбранного шага?

2. @robbieAreBest точно, я хотел бы изменить класс, например, цвет фона, скажем, номер шага, в зависимости от выбранного шага.

3. Можете ли вы показать нам, что вы пробовали раньше и что не работает в соответствии с вашими ожиданиями ?

4. Я пытаюсь отредактировать фон моего заголовка шага с помощью пользовательского класса со свойством выбранного элемента. Пункт 1: это работает, когда я пытаюсь изменить html-элементы. Пункт 2: это не работает, потому что заголовок шага автоматически генерируется из шагового устройства. Поэтому мой вопрос в том, как я могу указать пользовательский класс на выбранном шаге в его заголовке шага ? Надеюсь, это немного поможет ! @ГаурангДхорда

5. stackblitz.com/angular/… возьмите этот пример и скажите мне, что вы делаете и не работаете ?

Ответ №1:

Редактировать :

У меня есть это решение,работающее на меня, оно было проще, чем я думал, надеюсь, оно кому-нибудь поможет :

  ::ng-deep .mat-step-header[aria-selected="true"]  {
      background-color: var(--primary-color);
    }
 

Ответ №2:

вот демонстрация на stackblitz, она меняет фон значка шага, как только вы нажимаете на шаг.

шаговое динамическое изменение