Merge pull request #87 from hanuhimanshu/server_side_filtering_example

#26 Added a server side filtering example

src/app/app.component.html

@@ -79,4 +79,21 @@ <h3>Single selection with option groups</h3>
   </p>
 
   <span class="version-info">Current build: {{version.full}}</span>
+  <h3>Server Side Search</h3>
+  <p>
+    <mat-form-field>
+      <mat-select [formControl]="bankServerSideCtrl" placeholder="Bank">
+        <mat-option disabled="true" class="contains-select-search">
+          <ngx-mat-select-search [formControl]="bankServerSideFilteringCtrl"></ngx-mat-select-search>
+        </mat-option>
+        <mat-option *ngFor="let bank of filteredServerSideBanks | async" [value]="bank">
+          {{bank.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </p>
+  <p>
+    Selected Bank: {{bankServerSideCtrl.value?.name}}
+  </p>
+
 </div>

src/app/app.component.ts

@@ -5,8 +5,7 @@ import {MatSelect} from '@angular/material';
 
 import { ReplaySubject } from 'rxjs';
 import { Subject } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, delay, filter, map, take, debounceTime } from 'rxjs/operators';
 
 interface Bank {
  id: string;
@@ -38,6 +37,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 server side filtering */
+  public bankServerSideCtrl: FormControl = new FormControl();
+
+  /** control for filter for server side. */
+  public bankServerSideFilteringCtrl: FormControl = new FormControl();
+
   /** control for the selected bank for option groups */
   public bankGroupsCtrl: FormControl = new FormControl();
 
@@ -119,6 +124,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   /** list of banks filtered by search keyword for multi-selection */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
 
+  /** list of banks filtered after simulating server side search */
+  public  filteredServerSideBanks: 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);
 
@@ -149,11 +157,28 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe(() => {
         this.filterBanksMulti();
       });
+
+    this.bankServerSideFilteringCtrl.valueChanges
+      .pipe(
+        takeUntil(this._onDestroy),
+        debounceTime(200),
+        filter(search => !!search),
+        map(search => {
+          if (!this.banks) {
+            return [];
+          }
+          return this.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1);
+        }),
+        delay(500) // add server simulation
+      )
+      .subscribe(this.filteredServerSideBanks);
+
     this.bankGroupsFilterCtrl.valueChanges
       .pipe(takeUntil(this._onDestroy))
       .subscribe(() => {
         this.filterBankGroups();
       });
+
   }
 
   ngAfterViewInit() {

src/styles.scss

@@ -16,3 +16,9 @@ body {
   font-size: 8pt;
   float: right;
 }
+
+.mat-option[aria-disabled=true].contains-select-search {
+  /* let move mat-select-search at the top of the dropdown. As option is disabled, there will be no-ripple hence safe. */
+  position: static;
+  padding: 0;
+}