Argthtjtr

I wanted to implement ngx-mat-select-search in a form I use, but unfortunately, it doesn't works (I can't open the dropdown - it doesn't show me any value).

My html:

<div class="form">

  <mat-form-field>

    <mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"

      (ngModelChange)="dofilterCustomer()">

      <ngx-mat-select-search></ngx-mat-select-search>

      <mat-option *ngFor="let customer of customers | async" [value]="customer">

        {{customer}}

      </mat-option>

    </mat-select>

  </mat-form-field>

</div>

My .ts file:

import { Component, Inject, OnInit, ViewChild } from "@angular/core";

import {

  MAT_DIALOG_DATA,

  MatDialogRef,

  MatDialogModule,

  MatSelect

} from "@angular/material";

import { TableService } from "../table.service";

import { FormControl, Validators } from "@angular/forms";

import { EntryDTO, Customer } from "../../models";

import { SecurityService } from "src/app/security/security.service";

import { MatAutocompleteModule } from "@angular/material/autocomplete";

import { Observable } from "rxjs";

import { map, startWith } from "rxjs/operators";



@Component({

  selector: "app-add-dialog",

  templateUrl: "./add-dialog.component.html",

  styleUrls: ["./add-dialog.component.css"]

})

export class AddDialogComponent implements OnInit {

  constructor(

    public dialogRef: MatDialogRef<AddDialogComponent>,

    @Inject(MAT_DIALOG_DATA) public data: EntryDTO,

    public dataService: TableService

  ) {}



  customers!: Observable<string>;

  currentCustomer = "";

  forwarders!: Observable<string>;

  currentForwarder = "";

  bins!: Observable<string>;

  currentBin = "";



  @ViewChild("singleSelect") singleSelect!: MatSelect;



  ngOnInit() {}



  dofilterCustomer() {

    this.customers = this.dataService

      .getAllCustomers()

      .pipe(map(customers => this.filter(customers, this.currentCustomer)));

  }



  dofilterForwarder() {

    this.forwarders = this.dataService

      .getAllForwarders()

      .pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));

  }



  dofilterBins() {

    this.bins = this.dataService

      .getAllBins()

      .pipe(map(bins => this.filter(bins, this.currentBin)));

  }



  formControl = new FormControl("", [

    Validators.required

    // Validators.email,

  ]);



  getErrorMessage() {

    return this.formControl.hasError("required")

      ? "Required field"

      : this.formControl.hasError("email")

      ? "Not a valid email"

      : "";

  }



  submit() {

    this.dataService.addEntry(this.data);

  }



  onNoClick(): void {

    this.dialogRef.close();

  }



  public confirmAdd(): void {

    this.dataService.addEntry(this.data);

  }



  filter(values: string, current: string) {

    return values.filter(value => value.toLowerCase().includes(current));

  }

}

Initially I had the following code in my html. Then it worked, but i had no dropdown, just an "autocomplete-list":

<div class="form">

  <mat-form-field class="example-full-width accent">

    <input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput

      [(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>

    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>

    <mat-autocomplete #auto1="matAutocomplete">

      <mat-option *ngFor="let customer of customers | async" [value]="customer">

        {{customer}}

      </mat-option>

    </mat-autocomplete>

  </mat-form-field>

</div>

Maybe anybody could see what i am doing wrong ?

Thank you in advance.

You need to initialize this.customers. I suggest to initially set the observable as a replay subject and load the customers initially as follows:

customers: ReplaySubject<string> = new ReplaySubject<string>(1);



ngOnInit() {

  this.dataService

  .getAllCustomers()

  .subscribe(customers => this.customers.next(customers));

}

and

dofilterCustomer() {

  this.dataService

    .getAllCustomers()

    .subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));

}

See also the example implementation https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example and https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83