Topic: Access on filter event in mdb-select

Taher hendawi free asked 3 years ago

I am using mdb-select component and expected that if I enabled search/filtering, that I could access the fired event, when the user types in the search input.

I've very long list of selections which is fetched via http service and I need to fetch the respective data accordign to users input.

JeroenVunderink premium answered 3 years ago

I don't use mbd-select but the mdb-autocomplete. Took me some time also but here is the code that works for me:

TS file:

import { OwnerService } from 'src/app/services/owner.service';

export class EditDogForm implements OnInit {

  dogOwner: IOwner;
   * Owner lookup
  private _owners = new BehaviorSubject<IOwner[]>(null);
  owners = this._owners.asObservable();

  constructor(private ownerApi: OwnerService){}

   * On Init
  ngOnInit(): void {
    this.dogForm = new FormGroup({
      owner: new FormControl('', [Validators.required])

SetValues() {
     // This is workaround for the mb-autocomplete not be able to show the displayfield yet in the HTML

   * Display Owner Value
  onDisplayOwnerValue(selectedValue: IOwner) {
    this.dogOwner = selectedValue;
    return selectedValue.Name;

   * Retrieving values
  retrieveOwners(value: string) {
    var filterValue: string;
    this.dogOwner = null;

    if (value === null) {
      filterValue = "";
    } else if (typeof (value) === "object") {
      filterValue = (value as IOwner).Name.toLowerCase();
    } else {
      filterValue = value.toLowerCase();

    if (filterValue.length === 0 || (this.dogOwner && filterValue == this.dogOwner.Name)) {; // Empty List
    } else {
      this.ownerApi.getOwners(filterValue).subscribe(results => {;

*The HTML File *

          Owner field
        <div class="md-form" style="text-align: left;">
          <input formControlName="owner" type="text"
            class="completer-input form-control form-control-sm mdb-autocomplete"
            (ngModelChange)="retrieveOwners($event)" [mdbAutoCompleter]="owner" placeholder="Select the owner" />
          <mdb-auto-completer name="ownerlist" #owner="mdbAutoCompleter" textNoResults="No owners found"
            <mdb-option *ngFor="let owner of owners | async" [value]="owner">{{ owner.Name }}</mdb-option>
          <label for="owner" class="active">Owner</label>

Grzegorz Bujański staff commented 3 years ago

Hi. I understand that everything is already working for you?

Taher hendawi free commented 3 years ago

Hi @JeroenVunderink. Thanks for your answer! I have used auto-completer component too und solved my problem :)

Wojciech Marciniak free answered 3 years ago

Try mdb-select-2

The example below. The Client is a class consisting of just an ID (number) and a name (string). My have many more fields, however. The array Client[] is delivered by the back end via http client function defined in service instance (imported as private in a constructor).

<mdb-select-2 [(ngModel)]="client">
              [ngModel]="searchText | async"
            <mdb-select-option *ngFor="let el of filteredOptions | async" [value]="el">{{}}</mdb-select-option>

where TS is:

filteredOptions: Observable<any[]>;
clients: Client[] = [];
searchText = new Subject();

ngOnInit(): void {

filter(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.clients.filter((client: any) =>;

getCombos() {
    this.service.clients().subscribe((data: Client[]) => {
      this.clients = data;
      this.filteredOptions = this.searchText.pipe(
        map((name: string) => this.filter(name))

export class Client {
  id: number;
  name: string;

Taher hendawi free commented 3 years ago

Hi. could you please add links to documentation of mdb-select-2 and mdb-select-filter? I have solved my issue with auto-completer but it is useful to know that there is another way with mdb-select

Wojciech Marciniak free commented 3 years ago

All you have here: or but as I can see it now, it requires PRO license.

Taher hendawi free commented 3 years ago

thanks, I have pro license :)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.0
  • Device: laptop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No