Switch between vertical and horizontal stepper material

Question

How to switch between mat-vertical-stepper and mat-horizontal-stepper from angular component with same stepper steps?

Answer 1

to avoid rewriting identical html content, do like this. Create the template and give them a reference using a #hashtag. then you can instert them using ng-container *ngTemplateOutlet="hashtag"></ng-container>.

here is an example of making a responsive stepepr, the angular material way.

<ng-template #stepOne>   <div>step one</div> </ng-template>  <ng-template #stepTwo>   <div>step two</div> </ng-template>  <ng-template #stepThree>   <div>step three</div> </ng-template>  <ng-template #stepFour>   <div>step four</div> </ng-template>  <ng-template [ngIf]="smallScreen" [ngIfElse]="bigScreen">   <mat-vertical-stepper linear #stepper >     <mat-step>       <ng-container *ngTemplateOutlet="stepOne"></ng-container>     </mat-step>     <mat-step>       <ng-container *ngTemplateOutlet="stepTwo"></ng-container>     </mat-step>     <mat-step>       <ng-container *ngTemplateOutlet="stepThree"></ng-container>     </mat-step>     <mat-step>       <ng-container *ngTemplateOutlet="stepFour"></ng-container>     </mat-step>   </mat-vertical-stepper> </ng-template>  <ng-template #bigScreen>   <mat-horizontal-stepper linear #stepper >     <mat-step>       <ng-container *ngTemplateOutlet="stepOne"></ng-container>     </mat-step>     <mat-step >       <ng-container *ngTemplateOutlet="stepTwo"></ng-container>     </mat-step>     <mat-step>       <ng-container *ngTemplateOutlet="stepThree"></ng-container>     </mat-step>     <mat-step>       <ng-container *ngTemplateOutlet="stepFour"></ng-container>     </mat-step>   </mat-horizontal-stepper> </ng-template> 

You can use the angular cdk layout to track screen size like this.

import { Component } from '@angular/core'; import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';  @Component({   selector: 'app-responsive-stepper',   templateUrl: './responsive-stepper.component.html',   styleUrls: ['./responsive-stepper.component.scss'] }) export class ResponsiveStepperComponent implements OnInit {      smallScreen: boolean;      constructor(        private breakpointObserver: BreakpointObserver       ) {         breakpointObserver.observe([           Breakpoints.XSmall,           Breakpoints.Small         ]).subscribe(result => {           this.smallScreen = result.matches;       });      } }