The Angular Material Autocomplete component fails to show items upon upgrading the angular/material package to the newest version

Issue with Angular Material Autocomplete component not displaying items after updating angular/material package to the latest version.

The autocomplete was functioning correctly with "@angular/material": "^2.0.0-beta.10" but encountered issues when updated to beta.11 version.

.html

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input placeholder="Pick one"  matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/**
 * @title Simple autocomplete
 */
@Component({
  selector: 'autocomplete-simple-example',
  templateUrl: 'autocomplete-simple-example.html',
  styleUrls: ['autocomplete-simple-example.css']
})
export class AutocompleteSimpleExample {

  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
   ];

}

Answer №1

To utilize the mat- prefix, it is essential to implement this initial step. You can find more information by visiting the following link: https://github.com/angular/material-prefix-updater#after-running-the-tool

import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material';

@NgModule({
  providers: [
    {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
    // ...
  ],
})
export class MyModule { }

Upon testing your code snippet with beta.11, errors were encountered in mat-form-field, matAutoComplete, mat-autocomplete, mat-option. Only matInput compiled without issues. The alternative snippet provided below compiles error-free.

C1

<form class="example-form">
  <md-form-field class="example-full-width">
    <input placeholder="Pick one" matInput [formControl]="myControl" [mdAutocomplete]="auto">
    <md-autocomplete #auto="mdAutocomplete">
      <md-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </md-option>
    </md-autocomplete>
  </md-form-field>
</form>

After testing your code snippet using MATERIAL_COMPATIBILITY_MODE, it functioned properly. If you prefer not to use material compatibility mode, consider using snippet C1. For detailed instructions on implementing material compatibility mode for seamless usage of mat- prefix, refer to the link provided: https://github.com/angular/material-prefix-updater#after-running-the-tool

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

Using Jasmine to simulate an if/else statement in Angular/Typescript unit testing

After making a minor change to an existing function, it has been flagged as new code during our quality checks. This means I need to create a unit test specifically for the new 4 lines of code. The challenge is that there was never a unit test in place for ...

Best practices for updating the value of a specific key within an object that contains recursion in JavaScript/TypeScript

I have a tree component that uses the following data structure type TreeNode = { id: string, parentId: string, renderer: () => React.ReactNode, expanded: boolean, children?: Array<TreeNode>, } Now, I am looking to add functionality for ...

The TypeScript datatype 'string | null' cannot be assigned to the datatype 'string'

Within this excerpt, I've encountered the following error: Type 'string | null' cannot be assigned to type 'string'. Type 'null' cannot be assigned to type 'string'. TS2322 async function FetchSpecificCoinBy ...

Tips for removing a specific dynamic element in HTML using an Angular reactive form

I successfully implemented a dynamic reactive form that allows users to add or delete fields dynamically. However, I am facing an issue with removing the Radio Button (And / Or) from the last row. I would like it to only appear for the first and second row ...

Utilizing variables to set the templateUrl in Angular2

Trying to assign a variable to the templateUrl in my component, but it's not functioning as expected. @Component({ selector: 'article', templateUrl: '{{article.html}}', styleUrls: ['styles/stylesheets/article.comp ...

Customizable column layout in react-grid-layout

I am looking to implement a drag and drop feature in which users can place items into a grid without fixed columns. The goal is that if an item is dragged from outside the grid boundaries and dropped to the right (an empty area), the grid will automaticall ...

I am experiencing difficulty in retrieving the content-disposition from the client

I am attempting to retrieve a .xlsx file that is generated on the backend using Spring Boot. I am able to retrieve headers on the frontend, which include the content-disposition as shown below. However, I am unable to access the content disposition in the ...

What is the best way to choose a particular radio button from a group of radio buttons using typescript?

Is there a way to automatically select a specific radio button when an item is chosen from a dropdown menu on the webpage using a TypeScript function that is triggered by the dropdown selection? ...

Issues with sending emails through Nodemailer in a Next.js project using Typescript

I'm currently working on a personal project using Nodemailer along with Next.js and Typescript. This is my first time incorporating Nodemailer into my project, and I've encountered some issues while trying to make it work. I've been followin ...

The correlation between the node.js version and the @types/node version

I recently started exploring node.js and decided to experiment with using TypeScript alongside it. After running npm install @types/node, I found that the latest version available was 7.0.4: $ npm install @types/node <a href="/cdn-cgi/l/email-protectio ...

Issue with OpenAI's Rate Limit 429 Restriction

I've been experimenting with this repository in order to implement semantic search for YouTube videos using OpenAI + Pinecone. However, I keep encountering a 429 error at the following step - "Run the command npx tsx src/bin/process-yt-playlist.ts to ...

What could be causing the strange output from my filtered Object.values() function?

In my Vue3 component, I created a feature to showcase data using chips. The input is an Object with keys as indexes and values containing the element to be displayed. Here is the complete code documentation: <template> <div class="row" ...

Startup with a sleek fade-in animation

After multiple attempts following tutorials, I am still struggling to get a div in Angular to fade in when my page loads. Despite not receiving any errors, the implementation is not working as expected. Here's a glimpse of the current state of the ap ...

Creating a double-layered donut chart with Chart.js

I'm attempting to create a unique pie chart that illustrates an array of countries on the first level and their respective cities on the second level. After modifying the data in a JSON file to align with my goal, it doesn't seem to be working a ...

Using an angular 4 static method with a non-static object as an argument

Currently, I am working on an Angular 4 application and facing an issue while trying to pass the current language to the toLocaleString() method. The mathRound method is static, which makes it difficult to understand this.translation.currentLang. How can ...

Is there a way for me to input an event in handleSumbit?

I am having trouble understanding how to implement typing in handleSubmit. Can someone help? It seems that the "password" property and the "email" property are not recognized in the "EventTarget" type. import { FormEvent, useState } from "react" import { ...

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

Using TypeScript to automatically deduce the output type of a function by analyzing the recursive input type

I am currently working on developing an ORM for a graph database using TypeScript. Specifically, I am focusing on enhancing the "find" method to retrieve a list of a specific entity. The goal is to allow the function to accept a structure detailing the joi ...

HTML: Mark the chosen hyperlink or tag

In my HTML page, I am looking to keep the link selected when it is clicked on. Here is the initial HTML code: <table class="main-dev"> <tr> <td> <a class='titleForm' style="cursor:pointer"> ...

Show the information stored in an array using Angular

I have recently transitioned from using React to learning Angular, and now I am facing the challenge of displaying data from an array. My goal is to implement a dropdown menu where users can select an ID and see the corresponding address displayed. I bel ...