angular material stepper generation

Question

How can I generate a Materiel Stepper ?

I receive a JSON file and from it, I need to generate the stepper. I cannot get anything to display at all when using [innerHTML]

Here is an example of what I am trying to achieve :

  <mat-vertical-stepper [linear]="false">
    <mat-step [completed]="true" state="done">
      <ng-template matStepLabel>Job name here</ng-template>
      <p>this is test 1</p>
    </mat-step>
    <mat-step [completed]="true" state="done">
      <ng-template matStepLabel>Job name here</ng-template>
      <p>this is test 2</p>
    </mat-step>
    <ng-template matStepperIcon="edit">
      <mat-icon>work</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
      <mat-icon>work</mat-icon>
    </ng-template>
  </mat-vertical-stepper>

As it is, it works just fine yet when I try to use [innerHTML] this way :

  <mat-vertical-stepper [linear]="false">
    <span [innerHTML]="experienceDisplay">
    </span>
    <ng-template matStepperIcon="edit">
      <mat-icon>work</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
      <mat-icon>work</mat-icon>
    </ng-template>
  </mat-vertical-stepper>

I cannot get anything to be displayed at all. Even If I set experienceDisplay to be exactly as the removed piece of HTML. Looking at the inspector in Firefox / Chrome shows that there is no code at all.

How can I get my code to be displayed ?

P.S. : I am not interested in using forms, I am using the stepper for it's collapsable attributes when trying to display a lot of information. Witch is why the state is set at done and the [completed] variable is always set to true

Answer 1

The solution ended up being to not use the [innerHTML] but rather use a *ngFor the difference being that the [innerHTML] is not interpreted by the <mat-vertical-stepper>.

Therefore the solution looks something like this :

  <mat-vertical-stepper [linear]="false">
    <mat-step [completed]="true" state="done" *ngFor="let experience of experiences">
      <ng-template matStepLabel><div>{{experience.title}}</div></ng-template>
      <p [innerHTML]="experience.description"></p>
    </mat-step>
    <!-- ng templates here -->
  </mat-vertical-stepper>

The experiences variable being the JSON variable.