как изменить цвет angular шага, когда активен следующий шаг

Question

я пытаюсь выполнить шаговый прогресс, как показано на этом изображении

this is my code in css

.mat-step-header[aria-selected="true"] {
    background-color: #07C496;
}
.mat-step-header[ng-reflect-active='true']{
    background-color: #07C496;
 }

html :

     {{index + 1}} тест тест тест тест 

эта штука работает только в режиме разработки и не работает в режиме prod, потому что ng-reflection-active не существует в режиме prod. Может ли кто-нибудь помочь мне сделать это в css только пожалуйста.

Answer 1

Вы можете смоделировать выбрать все элементы перед поведением с помощью общего одноуровневого комбинатора (~):

.mat-step-header {
    background-color: #07C496 !important;
}

.mat-step-header[aria-selected="true"] ~ * {
    background-color: transparent !important;
}

Пример Stackblitz