Within my Angular application, I have successfully used a loop to populate the 4 employeeList components. Here is the code snippet:
<div *ngFor="let record of records">
<p-panel>
<div comp-employeeList [listFilter]="record.Filter"></div>
</p-panel>
</div>
Now, I am facing an issue when trying to incorporate 2 additional components (statistics) as the 2nd and 4th elements in this loop. My desired layout includes alternating employee and statistic components as depicted in the image below. While I'm aware of the nth-child selector in CSS, I'm unsure if it fits here. I have also explored using the index feature in *ngFor but haven't been able to implement it effectively with these components. For now, I just need assistance with populating the 1st and 3rd elements using ngFor. Any suggestions would be greatly appreciated.
<div *ngFor="let record of records">
<p-panel>
<div comp-employeeList [listFilter]="record.Filter"></div>
</p-panel>
</div>
<div>
<p-panel>
<div comp-statistics></div>
</p-panel>
</div>
Should I consider using ngSwitch within the ngFor statement?
Update
I attempted the following approach:
<div *ngFor="let record of records; let o=odd; let e=even;">
<div *ngIf="o">
1st component
</div>
<div *ngIf="o">
2nd component
</div>
<div *ngIf="e">
3rd component
</div>
<div *ngIf="e">
4th component
</div>
</div>