Angular 8 - How to resolve 'ExpressionChangedAfterItHasBeenCheckedError'

Question

I have a component that uploads files to a database. Whilst the files are uploading I display an overlay with the amount of files selected, and the amount of files successfully uploaded.

I wanted the overlay to automatically close when the amount of files uploaded is equal to the amount of files selected. However, my implementation has resulted in the following:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'

When files are selected for upload, I set overlay_uploadImage to true. That will display the overlay. Inside the overlay I have the following div. My intention here was that when the upload count is equal to the amount of files selected for upload, then call the overlay_uploadImage function. This function will set overlay_uploadImage to false and therefore hide the overlay container.

 <div *ngIf="uploadCount == files.length?overlay_uploadImage:false"></div>

Function called when criteria is met

overlay_imageUploads(){
    this.files = [];
    this.overlay_uploadImage = false;
}

Answer 1

This error comes when angular checks a value and then the value changes, its not an "error" as it doesnt breaks

I suggest you to use a different syntax:

 <div *ngIf="overlay_UploadImage  && uploadCount === files.length"></div>