Merge pull request #66 from bithost-gmbh/feature/optionGroupsExample

#15: add example with option groups

src/app/app.component.html

@@ -60,5 +60,23 @@ <h3>Single selection with custom clear icon</h3>
   <p>
     Selected Bank: {{bankCtrl.value?.name}}
   </p>
+
+  <h3>Single selection with option groups</h3>
+  <p>
+    <mat-form-field>
+      <mat-select [formControl]="bankGroupsCtrl" placeholder="Bank" #singleSelect>
+        <ngx-mat-select-search [formControl]="bankGroupsFilterCtrl"></ngx-mat-select-search>
+        <mat-optgroup *ngFor="let group of filteredBankGroups | async" [label]="group.name">
+          <mat-option *ngFor="let bank of group.banks" [value]="bank">
+            {{bank.name}}
+          </mat-option>
+        </mat-optgroup>
+      </mat-select>
+    </mat-form-field>
+  </p>
+  <p>
+    Selected Bank: {{bankGroupsCtrl.value?.name}}
+  </p>
+
   <span class="version-info">Current build: {{version.full}}</span>
 </div>

src/app/app.component.ts

@@ -13,6 +13,11 @@ interface Bank {
  name: string;
 }
 
+interface BankGroup {
+  name: string;
+  banks: Bank[];
+}
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html'
@@ -33,6 +38,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
    /** control for the MatSelect filter keyword multi-selection */
   public bankMultiFilterCtrl: FormControl = new FormControl();
 
+  /** control for the selected bank for option groups */
+  public bankGroupsCtrl: FormControl = new FormControl();
+
+  /** control for the MatSelect filter keyword for option groups */
+  public bankGroupsFilterCtrl: FormControl = new FormControl();
+
   /** list of banks */
   private banks: Bank[] = [
     {name: 'Bank A (Switzerland)', id: 'A'},
@@ -55,12 +66,62 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     {name: 'Bank R (Germany)', id: 'R'}
   ];
 
+  /** list of bank groups */
+  private bankGroups: BankGroup[] = [
+    {
+      name: 'Switzerland',
+      banks: [
+        {name: 'Bank A', id: 'A'},
+        {name: 'Bank B', id: 'B'}
+      ]
+    },
+    {
+      name: 'France',
+      banks: [
+        {name: 'Bank C', id: 'C'},
+        {name: 'Bank D', id: 'D'},
+        {name: 'Bank E', id: 'E'},
+      ]
+    },
+    {
+      name: 'Italy',
+      banks: [
+        {name: 'Bank F', id: 'F'},
+        {name: 'Bank G', id: 'G'},
+        {name: 'Bank H', id: 'H'},
+        {name: 'Bank I', id: 'I'},
+        {name: 'Bank J', id: 'J'},
+      ]
+    },
+    {
+      name: 'United States of America',
+      banks: [
+        {name: 'Bank Kolombia', id: 'K'},
+      ]
+    },
+    {
+      name: 'Germany',
+      banks: [
+        {name: 'Bank L', id: 'L'},
+        {name: 'Bank M', id: 'M'},
+        {name: 'Bank N', id: 'N'},
+        {name: 'Bank O', id: 'O'},
+        {name: 'Bank P', id: 'P'},
+        {name: 'Bank Q', id: 'Q'},
+        {name: 'Bank R', id: 'R'}
+      ]
+    }
+  ];
+
   /** list of banks filtered by search keyword */
   public filteredBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
 
   /** list of banks filtered by search keyword for multi-selection */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
 
+  /** list of bank groups filtered by search keyword for option groups */
+  public filteredBankGroups: ReplaySubject<BankGroup[]> = new ReplaySubject<BankGroup[]>(1);
+
   @ViewChild('singleSelect') singleSelect: MatSelect;
   @ViewChild('multiSelect') multiSelect: MatSelect;
 
@@ -75,6 +136,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     // load the initial bank list
     this.filteredBanks.next(this.banks.slice());
     this.filteredBanksMulti.next(this.banks.slice());
+    this.filteredBankGroups.next(this.copyBankGroups(this.bankGroups));
 
     // listen for search field value changes
     this.bankFilterCtrl.valueChanges
@@ -87,7 +149,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe(() => {
         this.filterBanksMulti();
       });
-
+    this.bankGroupsFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterBankGroups();
+      });
   }
 
   ngAfterViewInit() {
@@ -152,4 +218,39 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
+  private filterBankGroups() {
+    if (!this.bankGroups) {
+      return;
+    }
+    // get the search keyword
+    let search = this.bankGroupsFilterCtrl.value;
+    const bankGroupsCopy = this.copyBankGroups(this.bankGroups);
+    if (!search) {
+      this.filteredBankGroups.next(bankGroupsCopy);
+      return;
+    } else {
+      search = search.toLowerCase();
+    }
+    // filter the banks
+    this.filteredBankGroups.next(
+      bankGroupsCopy.filter(bankGroup => {
+        const showBankGroup = bankGroup.name.toLowerCase().indexOf(search) > -1;
+        if (!showBankGroup) {
+          bankGroup.banks = bankGroup.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1);
+        }
+        return bankGroup.banks.length > 0;
+      })
+    );
+  }
+
+  private copyBankGroups(bankGroups: BankGroup[]) {
+    const bankGroupsCopy = [];
+    bankGroups.forEach(bankGroup => {
+      bankGroupsCopy.push({
+        name: bankGroup.name,
+        banks: bankGroup.banks.slice()
+      });
+    });
+    return bankGroupsCopy;
+  }
 }