Как сделать отдельные угловые материалы, шаговый коллектор и содержимое?

Question

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

Моя идея состоит в том, чтобы отделить заголовки от контента, чтобыбудет больше походить на sidenav, но с функциональностью углового материала.

Здесь у вас есть то, что у меня есть к настоящему времени: фактический степпер, где содержимое появляется под заголовком

И здесь есть то, что я хочу хотел степпер, где содержимое находится в центре страницы и заголовки шагов в стороне

Я пытался редактировать заголовки следующим образом:

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

Но это не работает.

Answer 1

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

1 для заголовка и второй для контента.Вы должны иметь возможность скрыть заголовок для второй вкладки и содержимое для первой вкладки.На первой вкладке вы можете использовать selectedIndex, связанный с переменной в машинописи.Так что, как только вы измените переменную, он перейдет к этому шагу.чтобы изменить переменную, вы можете сделать функцию selectionChange, которая будет принимать событие шага из header-stepper и изменять переменную.Из того, что я увидел, степпер похож на вкладки.так что это должно работать.Надеюсь, что это поможет.

заголовок stepper (selectionChange) = "selectionChange ($ event)"

content stepper [(selectedIndex)] = "SelectedIndex "