title: Angular: Update template without ngModel
body: <p>I'm trying to achieve multi-select functionality and display the selected items using checkoxes.
  <strong>HTML</strong></p>
  
  <pre><code>&lt;div class="multiselect"&gt;
      &lt;div class="selectBox" (click)="showCheckboxes()"&gt;
           &lt;select&gt;
               &lt;option&gt;{{selectedBaseLicences}}&lt;/option&gt;
           &lt;/select&gt;
      &lt;div class="overSelect"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;div id="checkboxes"&gt;
      &lt;ng-container *ngFor="let base of baseLicences"&gt;
          &lt;label class="checkbox"&gt;
              &lt;input type="checkbox" name="checkbox1" (click)="myFunction(base)"&gt;
              &lt;span class="checkbox__input"&gt;&lt;/span&gt;
              &lt;span class="checkbox__label"&gt;{{base}}&lt;/span&gt;
           &lt;/label&gt;
      &lt;/ng-container&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>TS</strong></p>
  
  <pre><code>public selectedBaseLicences: string[] = [];
  
  public showCheckboxes() {
          let checkboxes = document.getElementById("checkboxes");
          if (!this.expanded) {
            checkboxes.style.display = "block";
            this.expanded = true;
          } else {
            checkboxes.style.display = "none";
            this.expanded = false;
          }
        }
  
      public myFunction(selectedBase) {
          this.selectedBaseLicences.push(selectedBase)
      }
  </code></pre>
  
  <p>I'm trying to display the checked base in Select as an array but template is not getting updated after this.selectedBaseLicences.push(selectedBase) operation. How to update the template in this case?</p>