After implementing the fadein effect from Angular-Animations in my ASP.NET based Angular project, I encountered an issue where only the first row is faded-in while the other rows are not displayed when using *ngIf. Here is a snippet of the code:
<ng-template pTemplate="body" let-row let-i="rowIndex">
<tr *ngIf="i==0" [@fadeInOnEnter]>
<td>
<a [routerLink]="['/detail/']">{{ row.Summary }}</a>
</td>
</tr>
</ng-template>
I am aware that I can use else in this scenario, but I want to avoid repeating multiple <td> blocks as seen in the example. Is there a way to apply animation only if the condition in the *ngIf field is true and display the same block without any animation otherwise?