I am doing a vertical stepper with angular material. The thing is that this stepper puts the content of each step below the step header, so if there are many steps it looks awfull because you have to scroll.
My idea is to separate the headers from the content so it will look more like a sidenav but with the angular material functionality.
Here you there is what i have by now: actual stepper where the content appears below the header
And here there is what i want wanted stepper where the content is in the center of the page and the steps headers in the side
I have tried by editing the headers like this:
mat-step-header{
display: flex ;
justify-content: flex-end ;
}
But it isn't working.
I am not sure if this works same on stepper, but I did similar thing on tabs. I used service to exchange data between components. If you use the content and header in same place you could try to have 2 steppers.
1 for header and second for content. You should be able to hide header for second tab and content for first tab. On first tab you can use selectedIndex bound to a variable in typescript. So that once you change the variable it will go to that step. to change the variable you can make a function selectionChange that will take step event from the header-stepper and change the variable. From what I saw stepper is similar to tabs. so this should work. Hope this helps.
header stepper (selectionChange)="selectionChange($event)"
content stepper [(selectedIndex)]="selectedIndex"