Having issues with Angular material autocomplete feature - not functioning as expected, and no error

I have set up my autocomplete feature, and there are no error messages. However, when I type something in the input field, nothing happens - it seems like there is no action being triggered, and nothing appears in the console.

Here is the HTML code:


   <form>
     <mat-form-field>
       <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
     </mat-form-field>

     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let n of testValues" [value]="n">
         {{n}}
       </mat-option>
     </mat-autocomplete>
   </form>

In the TypeScript file:


import { MatAutocomplete } from '@angular/material/autocomplete';
import { FormControl } from '@angular/forms';
...
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
...
constructor() {
    this.myControl = new FormControl();
}

Additionally, I have included the following import statement for MatAutocompleteModule in my app module:


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

The version of Angular Material being used is:


"@angular/material": "^5.0.0-rc.2",

Answer №1

Ensure you add a filter function in your .ts file.

To properly subscribe to the changes in your myControl value, you should do it like this:

this.myControl.valueChanges.subscribe(newValue=>{
    this.filteredValues = this.filterValues(newValue);
})

Make sure that every time the form control value changes, the filterValues() method is triggered. Here's how the method should be structured:

filterValues(search: string) {
    return this.testValues.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);
}

Use the testValues array as the main source and the filteredValues array in your HTML:

<mat-option *ngFor="let n of filteredValues" [value]="n">
    {{n}}
</mat-option>

Note that filtering does not happen automatically, so you need to implement your custom filtering logic as described above. Hope this clarifies things for you.

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

Can a string be used to retrieve a templateRef?

Can a TemplateRef be acquired by passing a string? I am intrigued by this possibility. I'm not looking to obtain it through a component's HTML; rather, I want to store it in a configuration file that can be used across all components. Specifical ...

Utilizing MSAL to seamlessly retrieve tokens with the assistance of an HTTP interceptor

When encountering a 401 error in Angular, I am attempting to invoke the MSAL silentTokenrefresh method within the authInterceptor. The goal is to retrieve a new token and then retry the failed request seamlessly so that the service remains uninterrupted. F ...

Is there an npm module for filtering cities by country?

Looking to implement city or state selection based on country in my Angular project. Is there a suitable npm package or API that can help achieve this functionality? ...

How to render a markdown file from a specified path using React and TypeScript

I am currently working on setting up routes to different .md files within my react/typescript application. Inside my App.tsx file, I have the following code: <Router> <main> <nav className="navbar navbar-expand-md navbar-light bg ...

Creating a specialized Angular validator that detects null values and returns the associated FormControl

I'm currently working on an Angular Reactive form group that includes a custom validator. My form includes 2 date pickers and I need to ensure that if a user selects a date from one picker, they must also select a date from the other. However, I am en ...

You are unable to call upon an object that may be of type 'undefined' in typescript

Among all the other inquiries on this topic, my issue lies with the typescript compiler seeming perplexed due to the following code snippet: if(typeof this[method] === "function"){ await this[method](req,res,next) } The error message I am en ...

Angular15: How can we properly provide support for legacy browsers?

I'm having issues with my Angular build on IOS12 as it's only displaying a blank page. Below are the dependencies listed in my package.json: "dependencies": { "@angular/animations": "^15.0.0", "@angular ...

Initiate Multiple Instances of Bootstrap Angular App on a Single Webpage

I am looking to bootstrap multiple instances of an Angular 4 micro app on the same page. Essentially, for each instance of the class ‘.angular-micro-app’, I want to create a new app instance. I realize that traditionally these would be Angular compone ...

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

I am a beginner in the world of Typescript/Angular, and I have encountered a compiling error TS2339. It seems that even when the condition *ngIf="x.length > 0;" should be false, the

I'm currently enrolled in a Typescript/Angular course where I am learning about the implementation of "*ngIf". During one of the lessons, the instructor provided an example using an empty array to demonstrate how it fails the condition and results in ...

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...

Guide on passing a customized component to the title property in Material-UI tooltip

I want to customize a Tooltip component by passing a custom component like the image shown in the link. https://i.stack.imgur.com/QkKcx.png Initially, I used Popover once, but now I prefer Tooltip because of its arrow feature. Currently, I am using Reac ...

angular primeng table has a checkbox to select all checkboxes

Is there a way to check all checkboxes in a table when the checkbox in the table header is clicked? I am currently utilizing angular 12 and primeNG table for this functionality. <p-table styleClass="text-sm" [value]="value" [loading] ...

Tips for minimizing the amount of code in Angular 5

As our Angular 5 application continues to expand, due to being a Single Page Application with dynamic components, our main component is becoming overloaded. The main component is responsible for rendering other components and contains the majority of the l ...

What are the steps for importing a file into a React app that is built using Create React App as plain text?

Objectives I aim to showcase code snippets from the project itself for reference. I intend to keep the displayed code up-to-date with its implementation. I prefer not to remove myself from create-react-app This React project, built using create-react-ap ...

Typescript gives you the ability to create a versatile writing interface that includes all

Think about this: interface Options { length?: number, width?: number } interface Action { performAction ({length, width}: Options): void } const myObject: Action = { performAction ({length, width}) { // do something without returning ...

Issue with primeng dropdown not displaying the selected label

When using the editable dropdown with filter feature from PrimeFaces, I've noticed that selecting an option displays the value instead of the label. Here is the code snippet: <div class="col-md-5 col-xs-12"> <p-dropdown [op ...

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

When I type a keystroke, I want to retrieve 10 usernames. Currently, I only get a username back if it exactly matches a username in the jsonplaceholder list. For example, if I type "Karia", nothing shows up until I type "Karianne". What I'm looking f ...

Does this Spread Operator Usage Check Out?

Upon reviewing Angular's API documentation, I came across the declaration for the clone() method in HttpRequest as follows: clone(update: { headers?: HttpHeaders; reportProgress?: boolean; params?: HttpParams; responseType?: "arraybuffer" ...

Can you explain to me the relationship between Node.js and Angular? Is it primarily for creating APIs or does

I've been trying to find information on Google about this, but I haven't found a satisfactory answer. Can someone explain the role of Node.js and ExpressJS in MEAN stack development? Is it similar to PHP for creating APIs that Angular will then c ...