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.

CodePudding user response：

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>