DOM not updated in Angular before scrolling

Question

I have a drag-drop directive included in my component. It works by modifying arrays and in this process, I manually modify the arrays as well.

The thing is, that the DOM is only updated once I scroll out of the actual view on the same page and back again. Then everything is as it should be.

Is there any immediate explanation for this behavior? And is there a way to force the update maybe?

Thanks.

I will try to add some code and see if it makes sense:

  dropDnD(e, day, employment: EmploymentDto, employee: EmployeeDto) {
    this.activeSource = e.value;
    this.activeTarget = { day: day, employment: employment, employee: employee };
this.copyWatch();
  }
  dragDnD($event, employee: EmployeeDto, day, index) {
    this.activeSourceDay = (+day - 1);
    this.activeSourceArrayIndex = index;
    this.activeSourceWatch = $event.value;
    this.activeSourceEmployee = employee;
    this.activeSourceWatchDay = this.employees[0].employments[0].watchDays[4].watches;
  }

  copyWatch() {
        this.planningTable.loadingIndicator = true;
        const sourceEmp = this.employees.find(x => x.employeeId === this.activeSourceEmployee.employeeId);
        const sourceIndex = this.employees.indexOf(sourceEmp);
        const sourceEmployment = sourceEmp.employments[0];
        const newDate = JSON.parse(JSON.stringify(new Date(Number(this.selectedYear.id), Number(this.selectedMonth.id) - 1, this.activeTarget.day, 0, 0, 0, 0)));

    this.planService.copyRealisedWatch(this.activeSource.plannedWatchId, this.activeSource.realisedWatchId, this.activeTarget.employment.employmentId, newDate, Number(this.selectedYear.id + this.selectedMonth.id)).subscribe(res => {
        const refreshedEmp = this.employees.find(x => x.employeeId === res.employeeId);
        this.employees[0].employments[0].watchDays[this.activeSourceDay].watches = [];

        const index = this.employees.indexOf(refreshedEmp);

      res.multiplier = this.getRowHeightMultiplier();
      this.employees[index] = res;
}

And the html

 <div ngxDroppable
      [copy]="false"
      dropZone="watch-target-container"
      (drop)="dropDnD($event, column.name, row['employments'][0], row)">

  <div *ngFor="let watch of getDayWatches(row['employments'][0], column.name); let i = index;"
        [style.background-color]="getBackGroundColor(watch, false)"
        [style.color]="getWatchMostReadableColor(watch, false)"
        class="watchcode"
        [contextMenu]="watchMenu"
        [contextMenuSubject]="{watch: watch, employee: value}"
        ngxDraggable="watch-target-container" [model]="watch" (drag)="dragDnD($event, row, toNumber(column.name), i)">
    <div *ngIf="watch.ownedByUser && !watch.closed && !watch.approved">
      <div>{{column.name}}
        <span *ngIf="watch.rejected">!</span>
        <i class="fa fa-arrows move" aria-hidden="true" ngxDragHandle></i>
        <p class="code" *ngIf="showWatchDetails.code">{{i}} {{watch != null ? watch.code : ""}}</p>
        <div [style.background-color]="getBackGroundColor(watch, true)" [style.color]="getWatchMostReadableColor(watch, true)">
          <p *ngIf="showWatchDetails.subcode">gg{{watch != null ? watch.subCode : ""}}</p>
          <p *ngIf="showWatchDetails.time">gg{{watch != null ? watch.timeDesc : ""}}</p>
        </div>
      </div>
      <button *ngIf="watch.ownedByUser && !watch.closed && !watch.approved" class="close" (click)="removeRealisedWatch(value, watch.plannedWatchId, watch.realisedWatchId)"><span aria-hidden="true">&times;</span></button>
    </div>
    <div *ngIf="!(watch.ownedByUser && !watch.closed && !watch.approved)">
      <div>
        <span *ngIf="watch.rejected">!</span>
        <span style="padding:0;margin:0;height:0;z-index:-300;" ngxDragHandle></span>
        <p *ngIf="showWatchDetails.code">hh{{watch != null ? watch.code : ""}}</p>
        <div [style.background-color]="getBackGroundColor(watch, true)" [style.color]="getWatchMostReadableColor(watch, true)">
          <p *ngIf="showWatchDetails.subcode">hh{{watch != null ? watch.subCode : ""}}d</p>
          <p *ngIf="showWatchDetails.time">hh{{watch != null ? watch.timeDesc : ""}}e</p>
        </div>
      </div>
      <button *ngIf="watch.ownedByUser && !watch.closed && !watch.approved" class="close" (click)="removeRealisedWatch(value, watch.plannedWatchId, watch.realisedWatchId)"><span aria-hidden="true">&times;</span></button>
    </div>
  </div>
  <input style="width: 100%; padding: 2px;"
          [(ngModel)]="row['employments'][0].watchDays[toNumber(column.name) - 1].currentWatchCodeSearch"
          [typeahead]="watchTemplates"
          (typeaheadOnSelect)="typeaheadOnSelect($event, row, row['employments'][0], toNumber(column.name))"
          (typeaheadNoResults)="changeTypeaheadNoResults($event,row['employments'][0].watchDays[toNumber(column.name) - 1].currentWatchCodeSearch)"
          [typeaheadOptionsLimit]="20"
          [typeaheadItemTemplate]="customItemTemplate"
          [typeaheadOptionField]="'code'"
          placeholder=""
          container="body"
          class="form-control" />
</div>