Utilizing ngScrollReveal triggers a re-render with every scroll event. I am invoking a function through the HTML in this manner:
<component [alternate]="toggleAlternate()">The code for toggleAlternate() is as follows:
toggleAlternate() {
this.alternate = !this.alternate;
return this.alternate;
}
Unfortunately, I encounter an error during each scroll event:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'alternate: false'. Current value: 'alternate: true'.
I have attempted to resolve this issue by injecting ChangeDetectorRef and invoking detectChanges() within the toggleAlternate() method, but that did not eliminate the error. As a newcomer to Angular, I am uncertain about how to address this.
Is there a way to avoid calling the toggleAlternate() method with every render?
While the UI currently functions correctly, I aim to eradicate the console errors.
Update
My goal is to present my work experience as a timeline where each entry alternates with the preceding one.
This is where toggleAlternate() is utilized:
<app-work-ex-position *ngFor="let job of year[Object.keys(year)[0]].jobs" [job]=job [alternate]="toggleAlternate()">
</app-work-ex-position>
This is how the <app-work-ex-position /> component appears:
<app-work-ex-timeline-entry (expand)="onExpandEntry($event)" class="{{alternate ? 'alternate' : ''}}">
<app-work-ex-timeline-entry-dot class="{{isExpanded ? 'primary-circle' : 'primary-circle circle-not-expanded'}}"
[size]="30"
[isAlternate]="alternate">
</app-work-ex-timeline-entry-dot>
</app-work-ex-timeline-entry>
Depending on the returned value of alternate from the parent component, I set the appropriate CSS class.