Why my Angular animation is not working with *ngIf

Question

I have an Angular animation where I want to change width percentage of a div dynamically. How can I make this animation work without removing *ngIf.. Code example link:text

    <div *ngIf="viewState=='scoreboard'">
        <div *ngFor="let user of users; let i = index">
          <div style="display: flex; width: 100%">
            <div
              style="background-color: red; text-align: center"
              [style.width.%]="user.PrevWPercent"
            >
              0
            </div>
            <div
              [@scoreboardPointsAnimation]="{
                value: scorebarState,
                params: {
                  dWidth: user.CurrentWPercent
                }
              }"
              style="background-color: green; text-align: center"
            >
              +0
            </div>
          </div>
        </div>
    </div>

    trigger('scoreboardPointsAnimation', [
      state('prev', style({ width: '0%' })),
      state('total', style({ width: '{{dWidth}}%' }), {
        params: { dWidth: '0%' },
      }),
      transition('prev => total', [animate('3000ms ease')]),
    ]),

I have tried adding ngIf to inner divs. Tried to change animation trigger to :enter

Answer 1

Use hidden instead of *ngIf like this.

[hidden]="viewState!=='scoreboard'"

Stackblitz Link: https://stackblitz.com/edit/angular-animate-stagger-bqh8fx

Answer 2

Just so you understand why it's wasn't working The NgIf directive is used when you want to display or remove an element based on a condition.

Take a look at this it's also useful: https://blog.angular-university.io/angular-ngif/