Can't type to search on ngx-mat-select-search

user_14578145 0
Viewed 507

I have this issue with searching while using ngx-mat-select-search. I can show the options but I can't type in other to search. I type but nothing I type appears on screen.

Can someone help me?

Here is my code:

<div *ngIf="testForStack()" class="test-form-group mt-5">
  <div class="row">
    <div class="col-md-2">
      <label for="test-form-clientId" class="test-form-lbl test-form-lbl--required">
                            {{'CLIENTE.RESPONSIBLE' | translate}}
                        </label>
    </div>
    <div class="col-md-4 mt-1">
      <mat-form-field class="test-form-field">
        <mat-select id="test-form-origin" formControlName="client" required>
          <mat-option>
            <ngx-mat-select-search ngDefaultControl [formControl]="client" noEntriesFoundLabel="No results found" placeholderLabel="Search" attr.aria-label="{{'GERAL.RESPONSAVEL' | translate}}" (change)="filterByTest($event)">
              <mat-icon ngxMatSelectSearchClear>delete</mat-icon>
            </ngx-mat-select-search>
          </mat-option>
          <mat-option *ngFor="let item of filteredClientsData" [value]="item">{{item.code}} - {{item.name}}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="col-md-2">
      <label for="test-form-clientName" class="test-form-lbl">
                            {{'CLIENTE.NOME_DO_CLIENTE' | translate}}
                        </label>
    </div>
    <div class="col-md-4 mt-1">
      <label id="test-form-clientName">{{clientName}}</label>
    </div>
  </div>
</div>

Where search should be

angular-material angular html
1 Answers

I have faced this issue in my angular application but I resolved this issue using following step which mention in below-

  1. Install mat-select-search in your application using this command- npm install ngx-mat-select-search

  2. Import the NgxMatSelectSearchModule and MatSelectModule in app.module.ts file.

    import { MatSelect } from '@angular/material/select';

    import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

  3. if you are using ngx-mat-select-search in child component then make sure import NgxMatSelectSearchModule and MatSelectModule in child.module.ts file also.

    or you can create material.ts file and import all the component then define this app.module.ts file and child.module.ts file.

    Taking reference from - https://stackblitz.com/edit/mat-select-search-gbvzkn?file=app%2Fmat-select-search%2Fmat-select-search.component.scss,app%2Fmat-select-search%2Fmat-select-search.component.html,app%2Fapp.component.html

user_88371910
Related