Having trouble using the search feature on ngx-mat-select-search for typing?

I am experiencing an issue with searching while using ngx-mat-select-search. I am able to display the options, but when I try to type in a search query, nothing appears on the screen. Can anyone provide assistance?

Below is the code snippet:

<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>

https://i.stack.imgur.com/kgJTD.png

Answer №1

When I encountered a similar issue in my Angular application, I found a solution by following these steps:

  1. To resolve the problem, first install mat-select-search in your application by running the command npm install ngx-mat-select-search

  2. Next, make sure to import the NgxMatSelectSearchModule and MatSelectModule in your 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 a child component, remember to also import NgxMatSelectSearchModule and MatSelectModule in the child.module.ts file.

    You can create a material.ts file and import all the components, then reference it in both the app.module.ts and child.module.ts files.

    For further guidance, check out this example on StackBlitz: 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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting error messages with Angular 2 HttpClient response payload

Currently, I am implementing the latest version (4.3) of HttpClient in angular to handle data POST requests to my backend server: this.httpClient.post<View>(`/path`, data).subscribe( (view: View) => console.log("Success"), (error: HttpErrorRe ...

Within a <div> element, there is a <span> element with a border and a specific line height. The

Can anyone explain why the border of the span is positioned next to the top? When I remove the display property for the span, it seems to work fine. Thank you. div { height: 80px; border: 1px solid green; line-height: 80px } .inner-span { heigh ...

Navigate to the location using AngularJS elements in the JavaScript iframe1

Dealing with an issue while working on AngularJS. I am facing a frustrating problem where I am attempting to use one link to open links in two separate iframes. All aspects of this function correctly, except for the actual links. The issue arises when usin ...

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

Using JavaScript to dynamically calculate the sum of selected column values in Angular Datatables

I have a table set up where, if a checkbox is checked, the amounts are automatically summed and displayed at the top. However, I am encountering issues with the code below as it is not providing the exact sum values. Can anyone suggest a solution to this p ...

Issues with the Content Editable Functionality

While working on my website, I encountered a strange issue. For some reason, I can't seem to get the contenteditable="true" attribute to work on the heading with the ID "hl". It would be awesome if someone could help me figure out how to mak ...

Customize the appearance of parent components based on the content of their child elements

I am currently working on a component that contains multiple instances, each with its own unique internal component (acting as a modal wrapper). I need to customize the size of each modal instance independently. How can I achieve this customization when th ...

Displaying PHP content using JavaScript classes

I have a popup feature implemented in JavaScript and all the necessary scripts added to my HTML page. I am attempting to load a PHP page in the popup when the submit button of my form is clicked. The popup is functioning correctly for buttons like the one ...

Is there a way to make my modal appear only when the "New" option is clicked?

Is there a way to make my modal in VueJS open only when I click on the "New" option? <select v-model="input.des" @change="$refs.modalName.openModal()"> <option value="A">A</opt ...

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

Retrieve information from the API following a change in language with Ngx-Translate

I am working on a web app using Angular 12 that supports 3 languages. To manage the languages, I have utilized Ngx-Translate. Overall, everything is functioning correctly, but I have encountered a small issue. I am using the onLangChange event emitter to ...

Using Angular Material for creating tabs with identical content

I am using material with angularjs and have encountered an issue with my two md-tabs. Both tabs have a similar DOM structure, but contain some unique content. Instead of duplicating the common DOM twice, I am looking for an alternative solution. Is it poss ...

How to filter an array in Angular 4 without the need for creating a new array and then displaying the filtered results within the same

In my collection of students, I have their names paired with their academic outcomes. studentResults = [ {name: 'Adam', result : 'Passed'}, {name: 'Alan', result : 'Failed'}, {name : 'Sandy', result : &ap ...

Transmit data from the Windows Communication Foundation to JavaScript

Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...

Creating TypeScript unit tests for nested functions: A step-by-step guide

I'm currently working with Angular 16 in combination with the ngRx framework. My development involves TypeScript coding and writing unit tests (.spec.ts) using Jasmine, especially for code similar to the example below. How do I invoke this method with ...

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

Parent component interacting with child component

In my application, I have a header component along with registration and login components. The selector of the header component is used in both the login and registration components. There is also a button in the header that displays as a login button if t ...

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...

ng-if not functioning correctly within md-menu causing it to not open properly

My menu has an ng-if within an <md-menu> tag that should reveal more information when a user clicks on the menu item. However, upon clicking, the menu closes and when reopened, although the DOM indicates that the extra info is displayed, it is not ac ...