animation problems

[ddtch]

Hi, I tried all solutions from similar issues here, but nothing helped.

issue12 issue96 issue92

I use ngrx, and angular 8 and circle progress 1.5.1. I faced the problem. When the page is loaded, and I get data from store, *ngIf becomes true, circle-progress just appearing with random small number before the final percentage number. I try to use circle-progress in a module which is lazy loaded and in this case circle progress doesn't animate anything. More of that when I click on circle progress component it shows a random value.

component.html

...
     <ng-container *ngIf="(userPanelData$ | async) as userData">
      <ng-container *ngIf="userData.user && userData.loanCurrentInfo">
....
        <circle-progress #progress
                         [lazy]="false"
                         [percent]="userData.user.discountPercentage"
                         [unitsFontSize]="30"
                         [unitsFontWeight]="300"
                         [showSubtitle]="false">
        </circle-progress>
...
      </ng-container>
    </ng-container>

component.ts

private getData(){
  combineLatest([
      this.store.select(selectUser),
      this.store.select(selectLoanCurrentInfo),
    ]).pipe(
      // get only non empty values
      filter(values => Object.values(values).every(_ => _)),
      map((responses) => ({
          user: responses[0],
          loanCurrentInfo: responses[1],
        })
      )
    ).pipe(
      take(1)
    ).subscribe(data => {
      if (data) {
        this.userPanelData$.next(data);
      }
    });
}

But when I tried to use circle-progress in initial app.component everything was fine. The animation was not very smooth but anyway it worked.

So I don't know what to do. Any ideas?

[ddtch]

I found out the problem. On this Page in my parent component was the OnPush change detection strategy. I turned it off, on paren page and inner page. And Animation works now! But! It means component doesn't work as expected.

[spierala]

Also have the issue with random percent numbers and no animation happening. We use OnPush everywhere. Enabling OnPush is not a good work around.