angular httpclient subscribe not changing view-CodePudding

I made an Angular component, and I want to display the progress percentage value. But even though I change the percentage value. But it is not displayed in the view and the changes are applied with the first change on the page

  UploadFile(sender): void {
    const progress = new Subject<number>();
    const element = sender.currentTarget as HTMLInputElement;
    this.showUpload = true;
    this.showDownload = false;
    const formData: FormData = new FormData();
    formData.append('file', element.files[0]);
    try {
      let headers = new HttpHeaders();
      headers = headers.set('Content-Type', 'application/json; charset=utf-8');
      // Renew token
      this._httpClient
        .post('https://localhost:7009/api/FileManager/upload', formData, {
          reportProgress: true,
          observe: 'events',
        })
        .subscribe((events) => {
          if (events.type === HttpEventType.UploadProgress) {
            this.percentage = Math.round((100 * events.loaded) / events.total);
            console.log('percentage', this.percentage);
          } else if (events.type === HttpEventType.Response) {
          }
        });
    } catch (er) {
      console.log(er);
    }
  }

and html is (I deleted parts of the code for more readability)

<div>
    <mat-icon
        (click)="fileUpload.click()" [svgIcon]="'heroicons_outline:upload'">
    </mat-icon>
    <div [style.height.%]="percentage"></div>
    <input #fileUpload type="file" hidden="true" (change)="UploadFile($event)" />
</div>

css:

 .upload-loader
    {
        position: absolute;
        height: 0%;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
         opacity: 0.4;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 300% 400%;
        animation: gradient 2s ease infinite;
    }

CodePudding user response：

inspect the file-uploader in elements tab of chrome or inspector of mozilla. see if height is changing or not. if yes, your layout has a problem and you have to change that.

CodePudding user response：

I was able to solve my problem I added the following code to my code


this._changeDetectorRef.detectChanges();

The whole code:


UploadFile(sender): void{
        const element = sender.currentTarget as HTMLInputElement;
        const formData: FormData = new FormData();
        formData.append('file', element.files[0]);
            let headers = new HttpHeaders();
            headers = headers.set('Content-Type', 'application/json; charset=utf-8');
            // Renew token
         this._httpClient.post('https://localhost:7009/api/FileManager/upload' , formData ,{ reportProgress: true, observe: 'events' }).subscribe((events) => {
            if (events.type === HttpEventType.UploadProgress)
            {
                this.percentage =Math.round(100 * events.loaded / events.total);
              console.log('percentage', this.percentage);
              this._changeDetectorRef.detectChanges();
            }
            else if (events.type === HttpEventType.Response) {
                this.percentage = 0;
                this._changeDetectorRef.detectChanges();
            }

          });
        
    }