ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
Encountering the above error in the console. In my code, I have filters that control the visibility of items within an ngFor loop. When no matches are found due to the filters, I use ngIf to display a message gracefully.
This is how I handle it...
Component.ts
<!-- Display contact logs -->
<ul #personTimeline>
<my-timeline-entry
*ngFor="let entry of contactLog | filter:filteredContactReason:'contactReason'"
logEntryDateTime={{entry.dateTime}} logEntryNotes={{entry.notes}}>
</my-timeline-entry>
</ul>
<!-- No results to display -->
<div *ngIf="!personTimeline.children.length">
<div class="alert alert-warning" role="alert">
<strong>{{startDate}} Sorry!{{' '}}</strong>No matching contact log entries found.
</div>
</div>
I am checking the length of children inside #personTimeline. If it's zero, I show the message indicating no results.
However, I made some changes and refactored the code, resulting in the message only appearing after interacting with the page. It shows up only when I click something after initially seeing an empty space where the message should be displayed.
I suspect I need to incorporate ngOnChanges to address this lifecycle issue. But I'm unsure about targeting the #personTimeline handle or whether I need to trigger
*ngIf="!personTimeline.children.length"Is there a better approach to handling the display of no results?
Any guidance or suggestions would be greatly appreciated.