Angular Материал Ввод и выбор внутри одного поля формы в одной строке

Question

Я хочу поле ввода материала и выбор материала в одной строке (внутри одного поля формы). Чтобы сделать это, я написал следующий код, но он состоит из двух строк. Как получить этот ввод и раскрывающийся список в одну строку?.

Ожидаемый результат: Внешний вид

Мой html код:

<div fxLayout="column" class="mat-elevation-z8">
    <mat-form-field class="p-1">
        <input matInput placeholder="Search table..."
            (keyup)="updateFilter($event)">
            <mat-select name="ampm" [(ngModel)]="selectedtablesearch" (selectionChange)="updateFilter($event)">
                    <mat-option *ngFor="let draft_tblselect of draft_tblselects"
                    [value]="draft_tblselect.viewValue">{{draft_tblselect.viewValue}}</mat-option>
               </mat-select>
    </mat-form-field>
</div>

Answer 1

Я разобрал эту проблему.

Код:

<div fxLayout="row" class="mat-elevation-z8"> 
    <div fxFlex="80" class="p-2">
        <mat-form-field class="w-100"> 
            <input matInput placeholder="Search table..." (keyup)="updateFilter($event)">  
        </mat-form-field>
    </div>
    <div fxFlex="20" class="p-2"> 
        <mat-form-field class="w-100"> 
            <mat-select [(ngModel)]="selectedtablesearch" (selectionChange)="updateFilter($event)"> 
                <mat-option *ngFor="let draft_tblselect of draft_tblselects" 
                    [value]="draft_tblselect.viewValue">{{draft_tblselect.viewValue}}</mat-option>  
            </mat-select>
        </mat-form-field> 
    </div>  
</div>