-2

I applied fadein effect of Angular-Animations to my Angular project based on ASP.NET, and display only the first row faded-in. However, the other rows are not displayed when using *ngIf as shown below:

<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 know that else can be used in this situation, but I do not want to repeat lots of <td> blocks omitted in this example. So, is there a way to display animation only if the condition is true in *ngIf field and display the same block without animation.

1 Answers1

1

Can you just apply the condition to the animation? 

[@fadeInOnEnter]="i == 1"
Nabel
  • 1,767
  • 14
  • 23
  • Yes, I exactly tried this but when using it all of the i values display animations. On the other hand, when using multiple conditions i.e. `[attr.@fadeInOnEnter]="i === 0 ? '' : null"` it only display one value. BUT I want to display all values and animate one of them. Any idea? –  Aug 18 '19 at 05:31