My custom Angular Component is showing one loop of data per screen in mat-tab-CodePudding

I have created a component which has hukamnama-sahib.component.html file as below:

<body *ngFor="let dataitem of HukamnamaSahibList">
  <h4>
    <span >{{dataitem.line.gurmukhi.unicode}}</span><br>
    <span >{{dataitem.line.translation.punjabi.default.unicode}}</span><br>
    <span >{{dataitem.line.translation.english.default}}</span>
  </h4>
</body>

And the app.component.html looks as below:

<div >

  <mat-tab-group preserveContent>
    <mat-tab label="First">
      <app-hukamnama-sahib></app-hukamnama-sahib>  // here, I have added the component
    </mat-tab>
    <mat-tab label="Second"> <app-other-hukamnama></app-other-hukamnama> </mat-tab>
  </mat-tab-group>


</div>

On loading the application, it looks as below (See the red-line area, it is blank. when I scroll to next, then comes the data for second loop (refer to 2nd screenshot)):

Please help me overcome this.

CodePudding user response：

Because you are using a tag body, please replace div