Below is my side nav to select different products and dropdown. I tried using [ngModel]="brand?.selected but it does not work or I am using it incorrectly. How do I approach this? Do I need to implement OnChanges and/or DoCheck? If I select google from the sidenav, how do you set the check input of the dropdown automatically?
<div [ngClass]="displayBrand">                    
  <ul *ngFor="let brand of brands | orderby: ['fieldName']; let i = 
    index">
    <div class="checkbox">
      <input type="checkbox" [value]="brand.selected"
        (change)="onBrand($event, i)">{{ brand.fieldName}}
        ({{brand.getCount()}})
      <a (click)="onBrandSite(brand.fieldName)">site</a>    
    </div>
  </ul>
</div 
<div class="btn-group" role="group" *ngIf="isBrand">
  <button type="button" class="btn btn-default dropdown-toggle" data-
   toggle="dropdown" 
   aria-haspopup="true" aria-expanded="false">Brands<span 
  class="caret"></span>
  </button>
    <ul class="dropdown-menu">
      <ul *ngFor="let brand of brands | orderby: ['fieldName']; let i 
         = index">
        <li class="checkbox"><input type="checkbox" 
         [value]="brand.selected" 
         (change)="onBrand($event, i)">{{ brand.fieldName}}
         <a (click)="onBrandSite(brand.fieldName)">site</a>
        </li>
      </ul> 
    </ul>
  </div>
This is my code to select the brand. Brand is declared as brands: SearchField[] = [];
export class SearchField {
  fieldName: string;
  products: Product[];
  selected: boolean;
}
onBrand(event, index: number) {
  var isChecked = event.currentTarget.checked;
  this.brands[index].selected = isChecked;
  this.getClickedFilters();
  this.getClickedSelected();
}       
