Переключение класса при заполнении формы - Angular

Question

У меня есть форма, написанная на Angular.

Индикатор выполнения наверху начинается с 1 - 4.

Когда пользователь находится на шаге 1, класс активен, и когда пользователь завершает шаг 1 и переходит на шаг 2, класс на шаге 1 изменяется на полный, а на шаге 2 получается активный класс и так далее.

Я написал следующее, как это

<div
    id="Progress_Bar___Element___Compl"
    class="Progress_Bar___Element___Complete"
    [ngClass]="{ 'active' : currentSection === _stage.YourStatus, 'completed' : currentSection === _stage.AboutYou || _stage.Affordability || _stage.CreateAccount  }"
  >
    <div id="Your_status_A6_Text_22" class="progress-label">
      <span>Your status</span>
    </div>
  </div>
  <div
    id="Progress_Bar___Element___Compl_A6_Component_25"
    class="Progress_Bar___Element___Complete"
    [ngClass]="{ active: currentSection == _stage.AboutYou, 'completed' : currentSection === _stage.Affordability }"
  >
    <div id="About_you" class="progress-label">
      <span>About you</span>
    </div>
  </div>
  <div
    id="Progress_Bar___Element___Compl_A6_Component_26"
    class="Progress_Bar___Element___Complete"
    [ngClass]="{ active: currentSection == _stage.Affordability }"
  >
    <div id="Affordability" class="progress-label">
      <span>Affordability</span>
    </div>
  </div>
  <div
    id="Progress_Bar___Element___Compl_A6_Component_27"
    class="Progress_Bar___Element___Complete"
    [ngClass]="{ active: currentSection == _stage.CreateAccount }"
  >
    <div id="Create_account" class="progress-label">
      <span>Create account</span>
    </div>
  </div>

Этот код работает нормально, но мне было интересно, есть ли более чистый способ написать это? Если нет, то отлично, но если есть, то было бы еще лучше.

Заранее спасибо

Answer 1

Как насчет использования Angular материала Stepper компонента?

https://material.angular.io/components/stepper/overview

Поскольку Angular Материал выходит из коробки из Angular и этого Степпера Компонент уже имеет функцию пользовательского интерфейса, которая имеет аналогичные логи c, которые вы написали, что означает, что вам не нужно дублировать те же логи c в вашем хранилище.