Is it possible to show user entered text in <mat-select>?

Question

    <mat-select  [(ngModel)]="textList" >
         <mat-option *ngFor="let textof list" [value]="text">
           {{ text }}
         </mat-option>
                
         <mat-form-field class="example-full-width">
            <input matInput [(ngModel)]="holdReason"/>
         </mat-form-field>
                    
   </mat-select>

using this code I can show a input field inside the mat-select. but if give some values to that input field that value is not appear in the box. it is empty. Is it possible to just show the text that we entered in input box show inside mat-select

This is what i can see after enter something in the input and just press enter

Answer 1

Here is a working version, you can refer the below stackblitz, do let me know if any doubts. You can enter a new value by giving enter key.

ts

import { ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
import { Component } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('matSelect') matSelect: ElementRef<MatSelect> | MatSelect;
  public variables = ['One', 'Two', 'County', 'Three', 'Zebra', 'XiOn'];
  public variables2 = [
    { id: 0, name: 'One' },
    { id: 1, name: 'Two' },
  ];
  selected = null;

  public filteredList1 = this.variables.slice();
  public filteredList2 = this.variables.slice();
  public filteredList3 = this.variables.slice();
  public filteredList4 = this.variables.slice();
  public filteredList5 = this.variables2.slice();

  enter(e) {
    const matSelect: MatSelect =
      this.matSelect && (<ElementRef<MatSelect>>this.matSelect).nativeElement
        ? <MatSelect>(<ElementRef<MatSelect>>this.matSelect).nativeElement
        : <MatSelect>this.matSelect;
    // console.log(this.matSelect);
    const value = e.target && e.target.value;
    if (value && matSelect) {
      e.target.value = '';
      this.variables.push(value);
      this.filteredList1 = this.variables;
      this.selected = value;
      matSelect.close();
    }
  }
}

html

<div class="center">
  <mat-form-field>
    <mat-select placeholder="Basic" #matSelect [(ngModel)]="selected">
      <mat-select-filter
        [array]="variables"
        (filteredReturn)="filteredList1 = $event"
        (keydown.enter)="enter($event)"
      ></mat-select-filter>
      <mat-option *ngFor="let item of filteredList1" [value]="item">
        {{ item }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

forked stackblitz