Angular 5 two-way binding to update another field

Question

I have two fields in the exported class. The template has a drop-down with its ngModel bound to the first field (selectedInterval) with two-way binding. When the dropdown option changes, the calculateReviewDate() event takes place and successfully updates the 2nd field (nextReviewDate), but the dropdown stays blank until I select the same option twice. In addition, the spinner never appears during the calculation. Does anyone know why?

<form #FormVar="ngForm" novalidate>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-2 col-sm-3">
          <input type="text" [ngModel]="nextReviewDate | date:shortDate" name="nextReviewDate" id="nextReviewDate1" class="form-control" disabled/>
      </div>
      <div class="col col-md-1 com-sm-3" *ngIf="showSpinner">
        <fa [name]="'spinner'" [size]=1 [spin]=true></fa>
      </div>
      <div class="col col-md-2 col-sm-3">
        <select class="form-control" name="nextReviewDate" id="nextReviewDate2" [(ngModel)]="selectedInterval" (change)="calculateReviewDate()">
                          <option *ngFor="let r of reviewIntervals" [value]="r.interval">{{r.intervalDescription}}</option>
                        </select>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!FormVar.valid" (click)="save(FormVar)">Review Note</button>

</form>

calculateReviewDate(): void {
  this.showSpinner = true;
  let calculator: calculateDate = new calculateDate();
  let today: Date = new Date();
  this.nextReviewDate = calculator.addMonth(today, this.selectedInterval);
  this.showSpinner = this.nextReviewDate === undefined;
}

Answer 1

How you get reviewIntervals? And for the spinner, my thought it's because too fast, try to add a delay before this.showSpinner = this.nextReviewDate === undefined;like set time out.

Answer 2

Not sure about your issue with the select, but I know what is going on with your spinner. You have no asychronous code in your calculateReviewDate method so the spinner won't be shown. JS runs on a single thread and unless you break the synchronous code up into parts that allow the control to be given back to the browser to paint, your spinner will not be shown.

Answer 3

I think you have two issues here:

1. onChange, the selected value is not shown the first time.
2. Spinner is not shown on Select value change.

Why the Spinner is not shown?
On Change since the calculateReviewDate() method is being called directly (Synchronous behavior), and in this method the spinner is set to true in the starting and then state gets set to either true/false based on nextReviewDate variable, I guess nextReviewDate variable would never become undefined,so nextReviewDate always holds some valid value, so it sets to false again, so in the background the spinner will become rendered and immediately gets removed as you have used a structural directive  and all logic in the method happens synchronous manner and will be in a very short span, so visually we are not able to see the rendered spinner getting on and off.

Why the Select controls selected value is not shown?
I have shared a modified example of your version in which things are fine,

Template:
<div>
  <form #FormVar="ngForm" novalidate>
  <div class="form-group">
    <div class="row">
      <div class="col col-md-2 col-sm-3">
        <div class="form-group">
          <input type="text" [ngModel]="nextReviewDate" name="nextReviewDate" id="nextReviewDate1" class="form-control" disabled/>
        </div>
      </div>
      <div class="col col-md-1 com-sm-3" *ngIf="showSpinner">
        <p>Spinner</p>
      </div>
      <div class="col col-md-2 col-sm-3">
        <select class="form-control" name="nextReviewDate" id="nextReviewDate2" [(ngModel)]="selectedInterval" (change)="calculateReviewDate()">
                          <option *ngFor="let r of reviewIntervals" [value]="r">{{r}}</option>
                        </select>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" >Review Note</button>

</form>
</div>

TS:
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  reviewIntervals = [1,2,3,4,5];
  selectedInterval = 5;
  showSpinner = false;
  nextReviewDate;


  calculateReviewDate(value): void {
    this.nextReviewDate = this.selectedI`enter code here`nterval;
}
}