Embedding component as Angular-Stepper object does not work

Question

In order to dynamically generate Angular-Stepper Objects with *ngFor, I am using two components. The "History" Component should display a variable amount of "historyUpdate" out of an array of historyUpdate Objects.

But if I put just one static component (which contains just a <mat-step>) in the <mat-stepper>, it does not show up.

history.html: contains the mat-stepper and should display the other component

<div class="main">
  <app-sidebar></app-sidebar>
  <div class="main-content">
    <mat-toolbar>
      <a href="#"
        ><fa-icon [icon]="faArrowLeft" class="icons"></fa-icon>Go Back</a
      >
      <h2>
        History
        <!-- dynamic-->
      </h2>
    </mat-toolbar>
    <div class="container">
      <mat-card class="card">
        <div class="content">
          <h4 class="title">
            {{tender.name}}
          </h4>
          <div class="line"></div>
          <h5 class="info">
            <span class="info-title">Dokumentennummer:</span> {{tender.documentNumber}}
          </h5>

          <h5 class="info">
            <span class="info-title">Bekanntmachnugsart:</span> 
          </h5>
          <h5 class="info">
            <span class="info-title">Auftragsgeber:</span> {{tender.company}}
          </h5>
          <h5 class="info" [ngClass]="{ limitTextHeight: isReadMore }">
            <span class="info-title">Beschreibung:</span>
            {{tender.description}}
          </h5>

          <button
            mat-flat-button
            id="more-btn"
            type="button"
            (click)="showText()"
          >
            {{ isReadMore ? "Read More" : "Read Less" }}
          </button>
          
        </div>
      </mat-card>
      <!-- dynamic -->
      
      <mat-stepper class="stepper" orientation="vertical">

       
        <app-historyupdate></app-historyupdate>
        

        
        <mat-step [completed]="false">
          <ng-template matStepLabel>11.10.2021</ng-template>
          <ng-template matStepContent>
            <h5 class="info">
              <span class="info-title">Details:</span> Lorem ipsum dolor sit
              amet consectetur adipisicing elit. Maxime mollitia, molestiae quas
              vel sint commodirepudiandae consequuntur voluptatum laborum
              numquam blanditiis harum quisqua
            </h5>
            <h5 class="info">
              <span class="info-title">Anhänge:</span>
              <mat-list>
                <a mat-list-item
                  ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
                  >dummy1.pdf</a
                >
                <a mat-list-item
                  ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
                  >dummy2.pdf
                </a>
              </mat-list>
            </h5>
          </ng-template>
        </mat-step>
        <mat-step [completed]="false">
          <ng-template matStepLabel>27.10.2021</ng-template>
          <ng-template matStepContent>
            <h5 class="info">
              <span class="info-title">Details:</span> Lorem ipsum dolor sit
              amet consectetur adipisicing elit. Maxime mollitia, molestiae quas
              vel sint commodirepudiandae consequuntur voluptatum laborum
              numquam blanditiis harum quisqua
            </h5>
            <h5 class="info">
              <span class="info-title">Anhänge:</span>
              <mat-list>
                <a mat-list-item
                  ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
                  >dummy1.pdf</a
                >
                <a mat-list-item
                  ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
                  >dummy2.pdf
                </a>
              </mat-list>
            </h5>
          </ng-template>
        </mat-step>
      </mat-stepper>
      
    </div>
    
  </div>
</div>

historyUpdate.html: Angular component with a <mat-step> inside.

     <mat-step [completed]="false">
    <ng-template matStepLabel>11.10.2021</ng-template>
    <ng-template matStepContent>
      <h5 class="info">
        <span class="info-title">Details:</span> Lorem ipsum dolor sit
        amet consectetur adipisicing elit. Maxime mollitia, molestiae quas
        vel sint commodirepudiandae consequuntur voluptatum laborum
        numquam blanditiis harum quisqua
      </h5>
      <h5 class="info">
        <span class="info-title">Anhänge:</span>
        <mat-list>
          <a mat-list-item
            ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
            >dummy1.pdf</a
          >
          <a mat-list-item
            ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
            >dummy2.pdf
          </a>
        </mat-list>
      </h5>
    </ng-template>
  </mat-step>
  <mat-step [completed]="false">
    <ng-template matStepLabel>27.10.2021</ng-template>
    <ng-template matStepContent>
      <h5 class="info">
        <span class="info-title">Details:</span> Lorem ipsum dolor sit
        amet consectetur adipisicing elit. Maxime mollitia, molestiae quas
        vel sint commodirepudiandae consequuntur voluptatum laborum
        numquam blanditiis harum quisqua
      </h5>
      <h5 class="info">
        <span class="info-title">Anhänge:</span>
        <mat-list>
          <a mat-list-item
            ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
            >dummy1.pdf</a
          >
          <a mat-list-item
            ><fa-icon [icon]="faFileAlt" class="icons"></fa-icon
            >dummy2.pdf
          </a>
        </mat-list>
      </h5>
    </ng-template>
  </mat-step>