I have an angular material stepper that can be displayed vertically or horizontally based on user input. Is there a way to apply a different CSS style to the stepper based on the orientation?
For example, apply red background to the stepper's content when vertical and blue background when horizontal.
Just add an [ngClass] or [ngStyle] based on the same condition that you use to display the stepper in vertical/horizontal.
e.g If your current code is something like
<mat-stepper orientation="verticalStepper ? 'vertical' : 'horizontal'">...</mat-stepper>
Add an ngClass attribute binding
<mat-stepper orientation="verticalStepper ? 'vertical' : 'horizontal'" [ngClass]="{ 'vertical-stepper': verticalStepper, 'horizontal-stepper': !verticalStepper }">...</mat-stepper>