Instead of static bank values, passed the dynamic data but search is not working

[ShilpaVKulkarni]

Hello,

I used the ngx-mat-select-search example in my angular project. This works fine. But instead of static bank values if I pass dynamic data as option then search is not working. How to resolve this? My code is as follows:

HTML

<mat-form-field>
  <mat-select [formControl]="bankCtrl"  #singleSelect>
    <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    <mat-option value = "select">Select bank</mat-option>
    <mat-option *ngFor="let app of apps" [value]="app">
      {{app.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

TS

import { Component, NgZone, OnInit, OnDestroy, ViewChild, HostListener, ViewEncapsulation } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
//import { MenuItems } from '../../shared/menu-items/menu-items';
import { MenuItems } from '../../bridle-menus/menu-items/menu-items';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';

import { TranslateService } from '@ngx-translate/core';

import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { ClientService, User, LocationService, ProcessAdminServices, Userinfo } from '../../shared/services/index';
import { AuthService } from "../../shared/services/auth.service";
import { env_host } from "../../shared/services/endpoints";
import { Globals } from '../../shared/services/globals';

import { AppDefinitionRepresentationModel, ProcessService, ProcessDefinitionRepresentation, ProcessInstance } from "../../process-services/index";
import {FormControl} from '@angular/forms';
import { Observable, ReplaySubject, Subject } from 'rxjs';
import { map, startWith, takeUntil, take } from 'rxjs/operators';
import { AppsProcessService, AuthenticationService, LogService, UserPreferencesService } from "../../core/index";
//added on 22-10-2018
import { VERSION, MatSelect } from '@angular/material';

const SMALL_WIDTH_BREAKPOINT = 960;
//added on 22-10-2018
interface Bank {
/** id: number;
 name: string;**/
 defaultAppId: string;
    deploymentId: string;
    name: string;
    description: string;
    theme: string;
    icon: string;
    id: number;
    modelId: number;
    tenantId: number;
}
@Component({
  selector: 'app-layout',
  templateUrl: './admin-layout.component.html',
  styleUrls: ['admin-layout.component.scss'],
  providers:[ClientService,AuthService,LocationService,ProcessAdminServices,AppsProcessService,ProcessService],
  encapsulation: ViewEncapsulation.None
})
export class AdminLayoutComponent implements OnInit, OnDestroy {
  banks: any;

  private _router: Subscription;

  mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  today: number = Date.now();
  url: string;
  showSettings = false;
  dark: boolean;
  boxed: boolean;
  collapseSidebar: boolean;
  compactSidebar: boolean;
  currentLang = 'en';
  dir = 'ltr';
  sidePanelOpened;
  user;
  scopes: string;
  returnscope: string;
  userinform = [];
  locationId: string;
  dspName: string;
  dropdownStyle: string;
  apps = [];
   //Bank=[];
  statusCode: number;
  currentApp: string = "";
  selectedApp= [];
  myapp;
  processDefinitions: ProcessDefinitionRepresentation[] = [];
  processDefinitionKey:string;
  start:string="start";
  authenticated: boolean;
  userinfo: Userinfo;
  @ViewChild('sidemenu') sidemenu;
  @ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;

  public config: PerfectScrollbarConfigInterface = {};
  //Added on 22-10-2018
  version = VERSION;
  /** control for the selected bank */
  public bankCtrl: FormControl = new FormControl();

   /** control for the MatSelect filter keyword */
  public bankFilterCtrl: FormControl = new FormControl();
/*private banks: Bank[] = [
    {name: 'Bank A (Switzerland)', id: 'A'},
    {name: 'Bank B (Switzerland)', id: 'B'},
    {name: 'Bank C (France)', id: 'C'},
    {name: 'Bank D (France)', id: 'D'},
    {name: 'Bank E (France)', id: 'E'},
    {name: 'Bank F (Italy)', id: 'F'},
    {name: 'Bank G (Italy)', id: 'G'},
    {name: 'Bank H (Italy)', id: 'H'},
    {name: 'Bank I (Italy)', id: 'I'},
    {name: 'Bank J (Italy)', id: 'J'},
    {name: 'Bank Kolombia (United States of America)', id: 'K'},
    {name: 'Bank L (Germany)', id: 'L'},
    {name: 'Bank M (Germany)', id: 'M'},
    {name: 'Bank N (Germany)', id: 'N'},
    {name: 'Bank O (Germany)', id: 'O'},
    {name: 'Bank P (Germany)', id: 'P'},
    {name: 'Bank Q (Germany)', id: 'Q'},
    {name: 'Bank R (Germany)', id: 'R'}
  ];*/

    /** list of banks filtered by search keyword */
  public filteredBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
    @ViewChild('singleSelect') singleSelect: MatSelect;
    /** Subject that emits when the component has been destroyed. */
  private _onDestroy = new Subject<void>();

  constructor(
    private router: Router, public menuItems: MenuItems, private globals: Globals,
    public translate: TranslateService, zone: NgZone,private clientService:ClientService,private authService: AuthService,private processAdminServices: ProcessAdminServices,
    private appsProcessService:AppsProcessService,
    private processService: ProcessService,
    private authenticationService: AuthenticationService,
        private logService: LogService,
        private userPreferenceService: UserPreferencesService

) {
          userPreferenceService.authType='BPM';

    const browserLang: string = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    this.mediaMatcher.addListener(mql => zone.run(() => {
      this.mediaMatcher = mql;
    }));
  }

  ngOnInit(): void {
    this.getScopes();
    this.login();
    this.getUserInfo();
    this.url = this.router.url;
    this.dropdownStyle = "dropdown-content";
 //ADDED ON 22-10-2018
    // set initial selection
    this.bankCtrl.setValue(this.apps[0]);
     // load the initial bank list
    this.filteredBanks.next(this.apps.slice());
// listen for search field value changes
    this.bankFilterCtrl.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanks();
      });

    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
      document.querySelector('.app-inner > .mat-drawer-content > div').scrollTop = 0;
      this.url = event.url;
      this.runOnRouteChange();
    });

  }

//ADDED on 22-10-2018
ngAfterViewInit() {
    this.setInitialValue();
  }

   /**
   * Sets the initial value after the filteredBanks are loaded initially
   */
  private setInitialValue() {
    this.filteredBanks
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
        // setting the compareWith property to a comparison function
        // triggers initializing the selection according to the initial value of
        // the form control (i.e. _initializeSelection())
        // this needs to be done after the filteredBanks are loaded initially
        // and after the mat-option elements are available
        this.singleSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id;
       // this.multiSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id;
      });
  }
  ngOnDestroy(): void  {
    this._router.unsubscribe();
    //added on 22-10-2018
     this._onDestroy.next();
    this._onDestroy.complete();
  }

  runOnRouteChange(): void {
    if (this.isOver()) {
      this.sidemenu.close();
    }

    this.updatePS();
  }

  isOver(): boolean {
    if (this.url === '/apps/messages' ||
      this.url === '/apps/calendar' ||
      this.url === '/apps/media' ||
      this.url === '/maps/leaflet' ||
      this.url === '/taskboard') {
      return true;
    } else {
      return this.mediaMatcher.matches;
    }
  }

  menuMouseOver(): void {
    if (this.mediaMatcher.matches && this.collapseSidebar) {
      this.sidemenu.mode = 'over';
    }
  }

  menuMouseOut(): void {
    if (this.mediaMatcher.matches && this.collapseSidebar) {
      this.sidemenu.mode = 'side';
    }
  }

  updatePS(): void  {
    if (!this.mediaMatcher.matches && !this.compactSidebar) {
      setTimeout(() => {
        this.directiveScroll.update();
      }, 350);
    }
  }

  // addMenuItem(): void {
  //   this.menuItems.add({
  //     state: 'menu',
  //     name: 'MENU',
  //     type: 'sub',
  //     icon: 'trending_flat',
  //     role: 'admin',
  //     children: [
  //       {state: 'menu', name: 'MENU'},
  //       {state: 'timeline', name: 'MENU'}
  //     ]
  //   });
  // }

logout(){
    //alert("coming in logout");
    // this.clientService.logout();
    // this.router.navigate(["/"]);
  this.clientService.logout()
     /**.subscribe(
 data => {
              this.router.navigate(['']);      
        });**/
        .subscribe(successCode => {
        //alert("logged out");
                  // this.router.navigate(['/']);
          // this.router.navigate(['']);
          // this.router.navigateByUrl('');
          // this.returnUrl = this.route.snapshot.queryParams['localhost:8088'] || '/';
           //alert("returnUrl Is:"+this.returnUrl);
                 //              this.router.navigate([this.returnUrl]);
                                  //localStorage.removeItem('loggedInUserName');

    window.location.href=env_host+"/";

                 }
               );
  }   

  getScopes() {
    this.authService.getScopes()
      .subscribe(
      data => {
        this.scopes = data;
        console.log("scopes=>"+this.scopes);
        if (this.scopes.includes("admin")) {
          this.returnscope = "yes";
          return this.returnscope
        }
      });
  }

  getUserInfo(){
    this.clientService.getUserInform()
      .subscribe(
        data => {

          this.userinform = data;
          console.log("userInform data=>",this.userinform);
          //localStorage.setItem('loggedInUserName', this.userinform[0].username);
          this.dspName= this.userinform[0].displayname;
          this.locationId = this.userinform[0].location_id;
          //var loggedInUser = localStorage.getItem('loggedInUserName');
          //this.getApps(loggedInUser);
}
) 
}

public getLocationId(locationIdAndName: any) {
  this.globals.locationIdAndName = locationIdAndName;
}

//lists logged in user's applications 
getApps(loggedInUser) {
                  this.processAdminServices.getApps(loggedInUser)
           .subscribe(
              data =>{ 
                let appsData = data["data"];
                      this.apps = appsData.filter(app => { 
                      if(app.id != null) { 
                     return app;
                      } 

                     });
                      },
              errorCode =>  {this.statusCode = errorCode}

                            );

 }

//On select application from drop down should redirect to start process form of the selected app
    onAppClickToStartProcess(myapp) {
    this.selectedApp = this.getSelectedAppByName(myapp);

  let appName = this.selectedApp['name'];
     let appId = this.selectedApp['id'];
                  this.processService.getProcessDefinitions(appId).subscribe(

        data => {
          this.processDefinitions = data;

          this.processDefinitionKey = this.processDefinitions[0].key;
         this.router.navigate(['app-list/activiti/start1',appId || 0,appName,this.processDefinitionKey,this.start,this.processDefinitions[0].id]);

       });
    }
  //get selected application details by app name  
getSelectedAppByName(myapp: string) {
    return this.apps.find(app => app.name === myapp);
}

public enableDropdown() {
  if (this.dropdownStyle == "dropdown-content") {
    this.dropdownStyle = "dropdown-content-enable";
  }
  else {
    this.dropdownStyle = "dropdown-content";
  }
}

@HostListener('mouseup')
  onMouseUp() {
    if (this.dropdownStyle == "dropdown-content-enable") {
    this.dropdownStyle = "dropdown-content";
    }
  }

  login() {
    this.clientService.getUserInfo()
          .subscribe(
            data => {

              this.userinfo = data;
                 this.authenticationService.login(this.userinfo.email, 'Bridle@456', true)
        .subscribe(
            (ticket: any) => {

              this.logService.info(ticket);
               this.authenticated=true;
               if(this.authenticated == true){
        this.getDeployedApps();
        }
            },
            (err: any) => {
               // this.actualLoginStep = LoginSteps.Landing;
               this.authenticated=false;
            },
            () => console.log('Login done')

        );}
    )
      }

      getDeployedApps() {

        this.appsProcessService.getDeployedApplications()
.subscribe(
    data =>{ 
      let appsData = data;

            this.apps = appsData.filter(app => { 
            if(app.id != null) { 
           return app;

            } 
           });
           /**this.Bank = appsData.filter(app => { 
            if(app.id != null) { 
           return app;

            } 
           });**/
          let Bank = appsData.filter(app => { 
            if(app.id != null) { 
           return app;

            } 
           });
           console.log("BANK DETAILS");
          // console.dir(this.Bank);
            },

    errorCode =>  {this.statusCode = errorCode}

                  );

}

//ADDED on 22-10-2018
private filterBanks() {
    if (!this.apps) {
      return;
    }
    // get the search keyword
    let search = this.bankFilterCtrl.value;
    if (!search) {
      this.filteredBanks.next(this.apps.slice());
      return;
    } else {
      search = search.toLowerCase();
    }
    // filter the banks
    this.filteredBanks.next(
      this.apps.filter(app => app.name.toLowerCase().indexOf(search) > -1)
    );
  }

}

Please provide solution for solving this issue.

Thanks & Regards, Shilpa Kulkarni

[maechler]

@ShilpaVKulkarni Could please try to provide more information on what exactly is not working. Do the options show up? Is it possible to select options? Does the search input field show up? Is the search keyword correctly passed to filterBanks?

I currently do not think that this is an issue with ngx-mat-select-search as it should work with dynamically loaded data just as it does with static data.

[ShilpaVKulkarni]

Thank you for the quick reply. Yes options show up. I am able to select options & also search input field shows up. Yes search keyword correctly passed to filterBanks. The issue is filter is not working. Can you please provide solution for this..

[ShilpaVKulkarni]

getDeployedApps() {

        this.appsProcessService.getDeployedApplications()
.subscribe(
    data =>{ 
      let appsData = data;

            this.apps = appsData.filter(app => { 
            if(app.id != null) { 
           return app;

            } 
           });

            },

    errorCode =>  {this.statusCode = errorCode}

                  );

}

This is the dynamic data I am passing. I am able to get this in drop down but filter is not working. How to map this dynamic values to interface?

[maechler]

Your variable this.apps should probably be of type Bank[]: private apps: Bank[] = [];

But you should probably also rename the interface from Bank to App, because your data is not a bank.

Does this help? I could not spot any other error at the moment.

[ShilpaVKulkarni]

I applied as you said. But still filtering is not working. My code is as follows:

import { Component, NgZone, OnInit, OnDestroy, ViewChild, HostListener, ViewEncapsulation } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
//import { MenuItems } from '../../shared/menu-items/menu-items';
import { MenuItems } from '../../bridle-menus/menu-items/menu-items';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';

import { TranslateService } from '@ngx-translate/core';

import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { ClientService, User, LocationService, ProcessAdminServices, Userinfo } from '../../shared/services/index';
import { AuthService } from "../../shared/services/auth.service";
import { env_host } from "../../shared/services/endpoints";
import { Globals } from '../../shared/services/globals';

import { AppDefinitionRepresentationModel, ProcessService, ProcessDefinitionRepresentation, ProcessInstance } from "../../process-services/index";
import {FormControl} from '@angular/forms';
import { Observable, ReplaySubject, Subject } from 'rxjs';
import { map, startWith, takeUntil, take } from 'rxjs/operators';
import { AppsProcessService, AuthenticationService, LogService, UserPreferencesService } from "../../core/index";
//added on 22-10-2018
import { VERSION, MatSelect } from '@angular/material';

const SMALL_WIDTH_BREAKPOINT = 960;
//added on 22-10-2018
interface App {
defaultAppId?: string;
        deploymentId?: string;
        description?: string;
        icon?: string;
        id?: number;
        modelId?: number;
        name?: string;
        tenantId?: number;
        theme?: string;
}
@Component({
  selector: 'app-layout',
  templateUrl: './admin-layout.component.html',
  styleUrls: ['admin-layout.component.scss'],
  providers:[ClientService,AuthService,LocationService,ProcessAdminServices,AppsProcessService,ProcessService],
  encapsulation: ViewEncapsulation.None
})
export class AdminLayoutComponent implements OnInit, OnDestroy {
  banks: any;

  private _router: Subscription;

  mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  today: number = Date.now();
  url: string;
  showSettings = false;
  dark: boolean;
  boxed: boolean;
  collapseSidebar: boolean;
  compactSidebar: boolean;
  currentLang = 'en';
  dir = 'ltr';
  sidePanelOpened;
  user;
  scopes: string;
  returnscope: string;
  userinform = [];
  locationId: string;
  dspName: string;
  dropdownStyle: string;
  //apps = [];
   Bank=[];
  statusCode: number;
  currentApp: string = "";
  selectedApp= [];
  myapp;
  processDefinitions: ProcessDefinitionRepresentation[] = [];
  processDefinitionKey:string;
  start:string="start";
  authenticated: boolean;
  userinfo: Userinfo;
  @ViewChild('sidemenu') sidemenu;
  @ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;

  public config: PerfectScrollbarConfigInterface = {};
  //Added on 22-10-2018
  version = VERSION;
  /** control for the selected bank */
  public bankCtrl: FormControl = new FormControl();

   /** control for the MatSelect filter keyword */
  public bankFilterCtrl: FormControl = new FormControl();
  private apps: App[] = [];
/*private banks: Bank[] = [
    {name: 'Bank A (Switzerland)', id: 'A'},
    {name: 'Bank B (Switzerland)', id: 'B'},
    {name: 'Bank C (France)', id: 'C'},
    {name: 'Bank D (France)', id: 'D'},
    {name: 'Bank E (France)', id: 'E'},
    {name: 'Bank F (Italy)', id: 'F'},
    {name: 'Bank G (Italy)', id: 'G'},
    {name: 'Bank H (Italy)', id: 'H'},
    {name: 'Bank I (Italy)', id: 'I'},
    {name: 'Bank J (Italy)', id: 'J'},
    {name: 'Bank Kolombia (United States of America)', id: 'K'},
    {name: 'Bank L (Germany)', id: 'L'},
    {name: 'Bank M (Germany)', id: 'M'},
    {name: 'Bank N (Germany)', id: 'N'},
    {name: 'Bank O (Germany)', id: 'O'},
    {name: 'Bank P (Germany)', id: 'P'},
    {name: 'Bank Q (Germany)', id: 'Q'},
    {name: 'Bank R (Germany)', id: 'R'}
  ];*/

    /** list of banks filtered by search keyword */
  public filteredBanks: ReplaySubject<App[]> = new ReplaySubject<App[]>(1);
    @ViewChild('singleSelect') singleSelect: MatSelect;
    /** Subject that emits when the component has been destroyed. */
  private _onDestroy = new Subject<void>();

  constructor(
    private router: Router, public menuItems: MenuItems, private globals: Globals,
    public translate: TranslateService, zone: NgZone,private clientService:ClientService,private authService: AuthService,private processAdminServices: ProcessAdminServices,
    private appsProcessService:AppsProcessService,
    private processService: ProcessService,
    private authenticationService: AuthenticationService,
        private logService: LogService,
        private userPreferenceService: UserPreferencesService

) {
          userPreferenceService.authType='BPM';

    const browserLang: string = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    this.mediaMatcher.addListener(mql => zone.run(() => {
      this.mediaMatcher = mql;
    }));
  }

  ngOnInit(): void {
    this.getScopes();
    this.login();
    this.getUserInfo();
    this.url = this.router.url;
    this.dropdownStyle = "dropdown-content";
 //ADDED ON 22-10-2018
    // set initial selection
    this.bankCtrl.setValue(this.apps[0]);
     // load the initial bank list
    this.filteredBanks.next(this.apps.slice());
// listen for search field value changes
    this.bankFilterCtrl.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanks();
      });

    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
      document.querySelector('.app-inner > .mat-drawer-content > div').scrollTop = 0;
      this.url = event.url;
      this.runOnRouteChange();
    });

  }

//ADDED on 22-10-2018
ngAfterViewInit() {
    this.setInitialValue();
  }

   /**
   * Sets the initial value after the filteredBanks are loaded initially
   */
  private setInitialValue() {
    this.filteredBanks
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
        // setting the compareWith property to a comparison function
        // triggers initializing the selection according to the initial value of
        // the form control (i.e. _initializeSelection())
        // this needs to be done after the filteredBanks are loaded initially
        // and after the mat-option elements are available
        this.singleSelect.compareWith = (a: App, b: App) => a && b && a.id === b.id;
       // this.multiSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id;
      });
  }
  ngOnDestroy(): void  {
    this._router.unsubscribe();
    //added on 22-10-2018
     this._onDestroy.next();
    this._onDestroy.complete();
  }

  runOnRouteChange(): void {
    if (this.isOver()) {
      this.sidemenu.close();
    }

    this.updatePS();
  }

  isOver(): boolean {
    if (this.url === '/apps/messages' ||
      this.url === '/apps/calendar' ||
      this.url === '/apps/media' ||
      this.url === '/maps/leaflet' ||
      this.url === '/taskboard') {
      return true;
    } else {
      return this.mediaMatcher.matches;
    }
  }

  menuMouseOver(): void {
    if (this.mediaMatcher.matches && this.collapseSidebar) {
      this.sidemenu.mode = 'over';
    }
  }

  menuMouseOut(): void {
    if (this.mediaMatcher.matches && this.collapseSidebar) {
      this.sidemenu.mode = 'side';
    }
  }

  updatePS(): void  {
    if (!this.mediaMatcher.matches && !this.compactSidebar) {
      setTimeout(() => {
        this.directiveScroll.update();
      }, 350);
    }
  }

  // addMenuItem(): void {
  //   this.menuItems.add({
  //     state: 'menu',
  //     name: 'MENU',
  //     type: 'sub',
  //     icon: 'trending_flat',
  //     role: 'admin',
  //     children: [
  //       {state: 'menu', name: 'MENU'},
  //       {state: 'timeline', name: 'MENU'}
  //     ]
  //   });
  // }

logout(){
    //alert("coming in logout");
    // this.clientService.logout();
    // this.router.navigate(["/"]);
  this.clientService.logout()
     /**.subscribe(
 data => {
              this.router.navigate(['']);      
        });**/
        .subscribe(successCode => {
        //alert("logged out");
                  // this.router.navigate(['/']);
          // this.router.navigate(['']);
          // this.router.navigateByUrl('');
          // this.returnUrl = this.route.snapshot.queryParams['localhost:8088'] || '/';
           //alert("returnUrl Is:"+this.returnUrl);
                 //              this.router.navigate([this.returnUrl]);
                                  //localStorage.removeItem('loggedInUserName');

    window.location.href=env_host+"/";

                 }
               );
  }   

  getScopes() {
    this.authService.getScopes()
      .subscribe(
      data => {
        this.scopes = data;
        console.log("scopes=>"+this.scopes);
        if (this.scopes.includes("admin")) {
          this.returnscope = "yes";
          return this.returnscope
        }
      });
  }

  getUserInfo(){
    this.clientService.getUserInform()
      .subscribe(
        data => {

          this.userinform = data;
          console.log("userInform data=>",this.userinform);
          //localStorage.setItem('loggedInUserName', this.userinform[0].username);
          this.dspName= this.userinform[0].displayname;
          this.locationId = this.userinform[0].location_id;
          //var loggedInUser = localStorage.getItem('loggedInUserName');
          //this.getApps(loggedInUser);
}
) 
}

public getLocationId(locationIdAndName: any) {
  this.globals.locationIdAndName = locationIdAndName;
}

//lists logged in user's applications 
getApps(loggedInUser) {
                  this.processAdminServices.getApps(loggedInUser)
           .subscribe(
              data =>{ 
                let appsData = data["data"];
                      this.apps = appsData.filter(app => { 
                      if(app.id != null) { 
                     return app;
                      } 

                     });
                      },
              errorCode =>  {this.statusCode = errorCode}

                            );

 }

//On select application from drop down should redirect to start process form of the selected app
    /*onAppClickToStartProcess(myapp) {
    this.selectedApp = this.getSelectedAppByName(myapp);

  let appName = this.selectedApp['name'];
     let appId = this.selectedApp['id'];
                  this.processService.getProcessDefinitions(appId).subscribe(

        data => {
          this.processDefinitions = data;

          this.processDefinitionKey = this.processDefinitions[0].key;
         this.router.navigate(['app-list/activiti/start1',appId || 0,appName,this.processDefinitionKey,this.start,this.processDefinitions[0].id]);

       });
    }*/
  //get selected application details by app name  
getSelectedAppByName(myapp: string) {
    return this.apps.find(app => app.name === myapp);
}

public enableDropdown() {
  if (this.dropdownStyle == "dropdown-content") {
    this.dropdownStyle = "dropdown-content-enable";
  }
  else {
    this.dropdownStyle = "dropdown-content";
  }
}

@HostListener('mouseup')
  onMouseUp() {
    if (this.dropdownStyle == "dropdown-content-enable") {
    this.dropdownStyle = "dropdown-content";
    }
  }

  login() {
    this.clientService.getUserInfo()
          .subscribe(
            data => {

              this.userinfo = data;
                 this.authenticationService.login(this.userinfo.email, 'Bridle@456', true)
        .subscribe(
            (ticket: any) => {

              this.logService.info(ticket);
               this.authenticated=true;
               if(this.authenticated == true){
        this.getDeployedApps();
        }
            },
            (err: any) => {
               // this.actualLoginStep = LoginSteps.Landing;
               this.authenticated=false;
            },
            () => console.log('Login done')

        );}
    )
      }

      getDeployedApps() {

        this.appsProcessService.getDeployedApplications()
.subscribe(
    data =>{ 
      let appsData = data;

            this.apps = appsData.filter(app => { 
            if(app.id != null) { 
           return app;

            } 
           });
          /*this.appls = appsData.filter(app => { 
            if(app.id != null) { 
           return app;

            } 
           });*/

           console.log("BANK DETAILS");
           console.dir(this.apps);
            },

    errorCode =>  {this.statusCode = errorCode}

                  );

}

//ADDED on 22-10-2018
private filterBanks() {
  alert("inside filter banks");
    if (!this.apps) {
        alert("inside if not apps");

      return;
    }
    // get the search keyword
    let search = this.bankFilterCtrl.value;
    if (!search) {
              alert("inside if not search");
alert("search "+search);
      this.filteredBanks.next(this.apps.slice());
      return;
    } else {
              alert("inside else not search");
alert("search "+search);

      search = search.toLowerCase();
    }
    // filter the banks
    this.filteredBanks.next(
      this.apps.filter(app => app.name.toLowerCase().indexOf(search) > -1)
    );
  }

}

[macjohnny]

In the template you are using

ngFor=„let app of apps“

Which uses this.apps

While in the filter method you have

// filter the banks
this.filteredBanks.next(
  this.apps.filter(app => app.name.toLowerCase().indexOf(search) > -1)
);

Which updates this.filteredBanks

So you should change your template to

*ngFor=„let app of filteredBanks | async“

and it should work.

[macjohnny]

If it works, please close this issue as this does not seem to be a bug

[ShilpaVKulkarni]

@macjohnny I changed the template to <mat-option *ngFor="let app of filteredBanks | async" [value]="app">. But the options are not listing in drop down.

[maechler]

You probably also have to call this.filteredBanks.next(this.apps.slice()); in your method getDeployedApps at the same point as you did this console.dir(this.apps);.

[ShilpaVKulkarni]

Thank you @maechler . After calling this.filteredBanks.next(this.apps.slice());, it worked.