How to make CDK Angular stepper vertical

Question

Please, how can we change the orientation to vertical for the custom angular cdk stepper in this example provided by their site:

https://material.angular.io/cdk/stepper/examples

because I can't change it, even if i set the orientation to vertical it doesn't take effect.

Answer 1

CDK Doesn't provide stylings

It's not possible to do it with just setting the orientation property. Component development kit (CDK) is just a collection of API's to help you build your own components and it's also used for the @angular/material library.

To check how the vertical mat-stepper works (it's based on the cdkStepper) you can check this directory on GitHub

How to do it?

In case you want to make the cdkStepper vertical you will have to write your own css for it. If you need to switch between orientations you can use the property orientation for example in ngIf or ngSwitch as the mat-stepper does.

Here is a very simple example of how you can do it based on the example from docs

.example-step-navigation-bar {
  display: flex;
  flex-direction: column; /* <-- This is the added line  */
  justify-content: flex-start;
  margin-top: 10px;
}

EDIT

To achieve the state that the content is next to the stepper you need to do few more change in css, set the .container to be flex, because it will put the elements in one row.

.example-container {
  border: 1px solid;
  padding: 10px;
  margin: 10px;
  display: flex;
}

and some HTML changes. We need to adjust the html to consist of two columns, we will achieve this by wrapping the content part into div with .example-step-content class.

<section class="example-container">
  <div class="example-step-navigation-bar">
    <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
    <button
      class="example-step"
      [class.example-active]="selectedIndex === i"
      *ngFor="let step of steps; let i = index"
      (click)="selectStepByIndex(i)"
    >
      Step {{ i + 1 }}
    </button>
    <button class="example-nav-button" cdkStepperNext>&rarr;</button>
  </div>
  <div class="example-step-content">
    <header>
      <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
    </header>

    <div [ngTemplateOutlet]="selected ? selected.content : null"></div>
  </div>
</section>

With this modifications we have two columns, left with the stepper navigation bar and right with the content. I have also updated the demo