azure cognitive services + angular

home.component.html

<div class="container">
    <div style="padding-bottom: 40px;"  *ngIf="imageRawString !== null">
      <div 
        class="object-marker"
        *ngFor="let objectData of objects"
        [ngStyle]="{
          'margin-left.px': objectData.rectangle.x / image.ratio,
          'margin-top.px': objectData.rectangle.y / image.ratio,
          'width.px': objectData.rectangle.w / image.ratio,
          'height.px': objectData.rectangle.h / image.ratio
        }"
        >
          <label style="background-color: red;">{{ objectData.object }}</label>
      </div>
      <img src="{{ imageRawString }}" [ngStyle]="{'width.px': image.fixedWidth}"/>
    </div>

    <input type="file" style="display: none;" accept="image/*" (change)="readImage($event.target)" #uploadFile>
    <button *ngIf="!isAnalysing" class="upload-btn" (click)="openImageBrowseDialog()">Select an Image</button>

    <h2 *ngIf="isAnalysing">Analysing Image.... Please Wait!</h2>

  </div>