How do I display ngFor data outside of ngFor loop angular?

Question

I have two ngFor loops in my component.

<ng-container *ngFor="let x of xs; let i = index">
    <ng-template #printData>
      <p>
        <span>Test</span>
      </p>
    </ng-template>
    <p>
      <span>{{x}}</span>
    </p>
    <!-- Iterate ys-->
    <ng-container *ngFor="let y of ys[i]; let j = index">
      <ng-container *ngIf="j==0 && y?.value; else normalPrintData">
        <ng-container *ngTemplateOutlet="printData"></ng-container>
      </ng-container>
      <ng-template #normalPrintData>
         <p *ngIf="y?.value">
            <span>Test</span>
         </p>
      </ng-template>
</ng-container>

basically I have two for loops but I want to display printData above the normal "x" interpolation if some condition is satisfied. I tried using ngTemplateOutlet but that does not work because the template is just printed at the ng-container that its called from.

Using an ngIf works but I feel a better solution can be achieved. Please help.

Answer 1

How about using ng-template context and setting the x property.

<ng-container *ngFor="let x of xs; let i = index">
    <ng-template #printData>
      <p>
        <span>{{x}}</span>
      </p>
      <p>
        <span>Test</span>
      </p>
    </ng-template>
    <!-- Iterate ys-->
    <ng-container *ngFor="let y of ys[i]; let j = index">
      <ng-container *ngIf="j==0 && y?.value; else normalPrintData">
        <ng-container *ngTemplateOutlet="printData; context: {x}"></ng-container> <!-- <------ changed here -->
      </ng-container>
      <ng-template #normalPrintData>
         <p *ngIf="y?.value">
            <span>Test</span>
         </p>
      </ng-template>
</ng-container>