不同div中的步进内容

Question

我发现与我接近的唯一问题是this one。 我想制作一个自定义步进器，将选项卡/导航置于不同的div中，然后将其用于设计目的。

我会有这样的步进器

<app-main-title title="VPN"></app-main-title>
<div class="stepper-container">
  <div class="stepper-wrapper">
    <mat-horizontal-stepper class="mat-horizontal-content-container">
      <mat-step
              label="{{ 'Creating' }}">
      </mat-step>
      <mat-step
              label="{{ 'Installing' }}">
      </mat-step>
      <mat-step
              label="{{ 'Connecting' }}">
      </mat-step>
    </mat-horizontal-stepper>
  </div>
</div>

<div class="main-content-container">
  <p>CONTENT SHOULD BE DISPLAYED HERE/p>
</div>

我将如何处理？我找到的最接近我想要的东西是使用路由器存储和列表项，但是我想使用material stepper内置的功能。