Angular function shows updated value first time only

html

 <input type="file" [(ngModel)]="profile.myFile1" (change)="handleFileInfo($event.target.files, 'myFile1')">    
 <div *ngIf="filesExists('myFile1')">
      <span>Size: {{getFileSize('myFile1')}}</span>                  
 </div>


 <input type="file" [(ngModel)]="profile.myFile2" (change)="handleFileInfo($event.target.files, 'myFile2')">
 <div *ngIf="filesExists('myFile2')">
      <span class="photo-size">Size: {{getFileSize('myFile2')}}</span>                  
 </div>

ts file code

    handleFileInfo(files: FileList, fileTypeName: string) { 
       // Other code ....
      let fileObj: FileObj = { type: fileTypeName, file: files.item(0), fileSizeText: fileSizeText, isValid: validSizeFlag };
      this.commonService.addOrReplaceFiles(this.files, fileObj); //Add or update the object array with the file fileObj
    }

    getFileSize(fileTypeName: string) {
      let fileObj = this.files.find(o => o.type === fileTypeName); //this.files : Object array
      return fileObj.fileSizeText;
    }

I have multiple file upload fields. If I upload a file it shows the file size. If I reupload the file again it shows the new file preview. But the getFileSize() function value never gets updated, it shows first uploaded file size.

getFileSize only gets called the first time the HTML is rendered. It has no way to know if your myFile1 has changed. I suggest having a myFile1Size variable that gets updated in your TS code whenever you upload a new file to hold the information about the size and bind that into the HTML as {{myFile1Size}}.