angular material vertical stepper separate label and content section

Hameed Syed :

Apply below flex properties to your mat-step-header which will only align header to the right\n\nmat-step-header{\n display: flex ;\n justify-content: flex-end ;\n}\n",

2019-01-25T07:45:45

vinotha :

Finally I achieved my design. Hope this will use for anyone.\n\nHTML:\n\n<mat-vertical-stepper #stepper [@.disabled]=\"true\">\n <mat-step label=\"Step 1\">\n <h2> Step 1</h2>\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n <mat-step label=\"Step 2\">\n Step 2\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n <mat-step label=\"Step 3\">\n Step 3\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n <mat-step label=\"Step 4\">\n Step 4\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n <mat-step label=\"Step 5\">\n Step 5\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n\n <mat-step label=\"Step 6\">\n Step 6\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n\n</mat-vertical-stepper>\n<div >\n <ul>\n <li class=\"mytest\" [ngClass]=\"{'active': stepper.selectedIndex == 0}\"><a (click)=\"move(0)\">Label 1</a></li>\n <li class=\"mytest\" [ngClass]=\"{'active': stepper.selectedIndex == 1}\"><a (click)=\"move(1)\">Label 2</a></li>\n <li class=\"mytest\" [ngClass]=\"{'active': stepper.selectedIndex == 2}\"><a (click)=\"move(2)\">Label 3</a></li>\n <li class=\"mytest\" [ngClass]=\"{'active': stepper.selectedIndex == 3}\"><a (click)=\"move(3)\">Label 4</a></li>\n <li class=\"mytest\" [ngClass]=\"{'active': stepper.selectedIndex == 4}\"><a (click)=\"move(4)\">Label 5</a></li>\n <li class=\"mytest\" [ngClass]=\"{'active': stepper.selectedIndex == 5}\"><a (click)=\"move(5)\">Label 6</a></li>\n</ul>\n</div>\n\n\nTS:\n\nimport { Component, OnInit, ViewChild } from '@angular/core';\nimport {MatStepper} from '@angular/material';\n\nexport class implements OnInit {\n isLinear = false;\n\n @ViewChild('stepper') stepper: MatStepper;\n\n constructor(private _formBuilder: FormBuilder) {}\n ngOnInit() {\n }\n move(index: number) {\n this.stepper.selectedIndex = index;\n }\n}\n\n\nThats all. \n\nUsed from: https://stackblitz.com/edit/angular-demo-matstepper-move?file=app%2Fdemo%2Fdemo.component.html",

2019-01-26T10:41:00

Divya Nayak :

The Above solution, worked for me with slight modification. I used mat-side nav and mat-stepper to achieve the below design. \n\n\nYou also must be wondering where is the header, I removed by adding this CSS in styles.css \n\r\n\r\n.mat-horizontal-stepper-header-container {\r\n white-space: nowrap;\r\n display: none !important;\r\n align-items: center;\r\n }",

2020-06-15T16:25:36