separate mat-horizontal-stepper labels and content

问题:

I want the stepper labels to be shown in a toolbar, but the content to be shown in another div.

something like:

<div>
 <mat-horizontal-stepper md-stretch-steppers="always">
  <mat-step>
   <ng-template matStepLabel>Head 1</ng-template>
  </mat-step>
  <mat-step>
   <ng-template matStepLabel>Head 1</ng-template>
  </mat-step>
 </mat-horizontal-stepper>
</div>

<div>
 <any-components></any-components>
</div>

<div id="contents">
  [contents goes here]
</div>

can i separate the stepper labels from the content?