0

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();
}       

enter image description here

harold_mean2
  • 238
  • 1
  • 14
  • Please don't ask duplicate questions... https://stackoverflow.com/questions/45405090/how-do-you-set-the-value-of-a-check-input-automatically-from-another-check-input – AT82 Jul 31 '17 at 17:46
  • My mistake. I tried to rephrase my question maybe its misunderstood. Thanks. – harold_mean2 Jul 31 '17 at 17:50
  • This is a bit unclear tho. Are both these codes in sidenav or what? It's a bit unclear at least to me where these codes reside. – AT82 Jul 31 '17 at 17:56
  • Both codes are in the product-list.component. First I search for electronics in products, then I save each field (price, brand, memory) in an array. So, If I select google in brand, it displays only google products. I just want a feature so the user can select from the top menu or side menu (price, brand) to display all selected products. – harold_mean2 Jul 31 '17 at 18:01
  • Also using filter or orderby with pipes is considered bad practice. Use services instead... https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe Quote: they perform poorly and prevent aggressive minification ... The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second. – JGFMK Jul 31 '17 at 18:02
  • I only use filter to order the names on the side menu. To order the price label on the side menu, I use bubble sort. – harold_mean2 Jul 31 '17 at 18:05
  • It looks like you have a problem with change detection, you can take a look at this [answer](https://stackoverflow.com/a/42962723/1551411) – Kld Jul 31 '17 at 18:11
  • Could you perhaps create a plunker? – AT82 Aug 01 '17 at 13:47
  • [ngModel]="brand?.selected" fixed it. Of course, I had to import FormsModule to my Shared Module. – harold_mean2 Sep 07 '17 at 01:05

0 Answers0