title: The data binding between html element property and script value not synchronized
body: <p><b>Problem description:</b> <br>
  There is an availability calendar which displays whether a person is busy on a particular slot (each day is divided to two slots). This state is stored in the <code>isSlotFree</code> boolean 2d array (this array is of size 31 x 2). Initially, all values in this array are initialized to true. Then, a http get request is made to a server requesting the busy dates. Once they are received, the function <code>setIsSlotFree()</code> is called to set the appropriate values in the array to false. In the view (HTML file) there is a <code>&lt;td&gt;</code> element for each slot. Each of these elements update their color (using class styles) based on the boolean value stored in the relevant index of the array. The problem is that <b>the html page does not reflect the changes made to the array after calling the <code>setIsSlotFree()</code> function.</b> (ie. the html elements still see all values as true). However, when I print the array in the console right after the get request, it has changed the appropriate values to false. When any event is triggered, then only the view is updated to the correct values. What is the problem here?<br><br>
  Following are the relevant parts of the component.ts file</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class CalendarComponent implements OnInit {
  
    viewDate: Date;
    isSlotFree: boolean[][] = [
      [true, true]
    ];
  
    constructor(private http: HttpClient) {
  
    }
  
  
    ngOnInit() {
      this.viewDate = new Date();
      var i: number;
      var j: number;
  
      for (i = 1; i &lt; 31; i++) {
        this.isSlotFree.push([true, true]);
      }
      let p = new HttpParams().set('month', (this.viewDate.getMonth() + 1).toString());
  
      this.http.get &lt; busyDateResponse[] &gt; ("http://localhost:51967/api/stylists/getBusyDates", {
        params: p
      }).subscribe(res =&gt; {
        this.setIsSlotFree(res);
      });
  
      this.x = true;
      console.log(this.isSlotFree);
      this.viewDate = new Date();
  
    }
  
    setIsSlotFree(res: busyDateResponse[]): void {
      var busy_date: busyDateResponse;
      for (busy_date of res) {
        var temp: number = (busy_date.slot == 'm') ? 0 : 1;
        this.isSlotFree[busy_date.day - 1][temp] = false;
      }
  
    }
  }
  
  interface busyDateResponse {
    $id: string;
    day: number;
    month: number;
    year: number;
    slot: string;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Following shows the relevant parts of the component.html file</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ng-template #cellTemplate let-day="day" let-locale="locale"&gt;
    &lt;div class="cal-cell-top"&gt;
      &lt;div class="cal-day-number w3-xlarge"&gt;{{ day.date | calendarDate:'monthViewDayNumber':locale }}&lt;/div&gt;
      &lt;br&gt;
  
    &lt;/div&gt;
    &lt;div *ngIf="day.inMonth &amp;&amp; day.isFuture"&gt;
      &lt;table style="width:100%"&gt;
  
        &lt;tr&gt;
          &lt;td class="calendar-slot" [ngClass]="{'w3-green': isSlotFree[day.date.getDate()-1][0], 'w3-red': !isSlotFree[day.date.getDate()-1][0]}"&gt;{{isSlotFree[day.date.getDate()-1][0]}}Morning&lt;/td&gt;
          &lt;mat-checkbox (change)="editSelectedSlots($event)" [checked]="isSelectedSlot(day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_m')?true:false" [id]="day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_m'"
            *ngIf="isSlotFree[day.date.getDate()-1][0]"&gt;&lt;/mat-checkbox&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="calendar-slot" [ngClass]="{'w3-green': isSlotFree[day.date.getDate()-1][1], 'w3-red': !isSlotFree[day.date.getDate()-1][1]}"&gt;{{isSlotFree[day.date.getDate()-1][1]}}Evening&lt;/td&gt;
          &lt;mat-checkbox (change)="editSelectedSlots($event)" [checked]="isSelectedSlot(day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_e')?true:false" [id]="day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_e'"
            *ngIf="isSlotFree[day.date.getDate()-1][1]"&gt;
          &lt;/mat-checkbox&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
  &lt;/ng-template&gt;
  
  &lt;div&gt;
    &lt;mwl-calendar-month-view [viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)" (dayClicked)="dayClicked($event)" [cellTemplate]="cellTemplate" [refresh]="refresh"&gt;
    &lt;/mwl-calendar-month-view&gt;
    &lt;div class="w3-center"&gt;
      &lt;button mat-raised-button&gt;Make booking&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please note that <code>&lt;mwl-calendar-month-view&gt;</code> utilizes the <code>ng-template</code> to generate cells in a calendar.</p>