在输入字段中输入 3 个字符后如何显示 mat-menu？

Question

I'm implement this input field so that when I enter 3 characters I want to display mat-menu as a value of mat-option but for some reason the mat-menu never gets display. Can anyone point me in the right direction? thanks a lot in advance!

Here's LIVE DEMO

<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngIf="isSpinnerLoading">

  <div *ngIf="!menuContent">Loading...</div>
  <div *ngIf="menuContent">
    show menu

    <mat-menu #menu="matMenu" class="menu-select">
            <div (click)="$event.stopPropagation()">
                <div *ngFor="let item of myList">
                    <mat-checkbox
                        class="mat-menu-item">
                        {{item}}
                    </mat-checkbox>
                </div>
            </div>
        </mat-menu>
  </div>
    </mat-option>
</mat-autocomplete>

This is what I'm trying to accomplish:

Answer 1

Problem

The problem that you are facing is that the mat-menu openMenu() function is not triggered when your content opens

Solution

We will need a way to trigger the menu to open Below is an approach that I have used

Add the below markup in your html

<span #menuTrigger="matMenuTrigger"  [matMenuTriggerFor]="menu">show menu</span>

In your TS file add below @ViewChild property to hold the matMenuTrigger

  @ViewChild("menuTrigger", { static: false }) set menuTrigger(
    content: MatMenuTrigger
  ) {
    if (content) {
      this.contentPlaceholder = content;
    }
  }

Finally amend your onKeyUp() function

  onKeyUp() {
    if (this.currentText.length >= 3) {
      console.log("testing");
      this.isSpinnerLoading = true;
      this.menuContent = false;
      setTimeout(() => {
        this.menuContent = true;
      }, 2000);
      setTimeout(() => {
        this.contentPlaceholder.openMenu();
      }, 2001);
    } else {
      this.isSpinnerLoading = false;
    }
  }

Note that we are triggering openMenu() after the this.menuContent() becomes true

See Demo

Answer 2

1. There is no need to use mat-menu, you can use mat-checkbox as an option.
2. The ngFor must be used on the mat-option element otherwise, with the current implementation, you will end up with a single option.
3. The loading indicator (Loading...) can be displayed as a disabled mat-option.
4. In order to enable multiple selections the item should be an object that has a boolean that indicates whether the item is checked or not.

Here is a link of stackblitz. It's not perfect but it can help.