Angular Material Input and select inside one form field in single row

Question

I want a material input field and a material select in one line(inside one form field). To get it done I wrote the below code but it goes into two rows. How can I get this input and drop-down in one line?.

Expected result: Frontend view

My html code :

<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>

If you need input data list, just give a try as mentioned in the below link: stackblitz.com/angular/… — Nishanth Prabhakaran
– Nishanth Prabhakaran, Commented Apr 19, 2020 at 11:55

denuwanchamara · Accepted Answer · 2020-04-19 12:29:58Z

1

I've sorted this issue.

Code:

<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>

answered Apr 19, 2020 at 12:29

denuwanchamara

413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nishanth Prabhakaran Over a year ago

Good to see that you got it... Happy coding

ng_dev Over a year ago

Hi @denuwanchamara, Did you try adding any bg color for the dropdown field. I have the similar requirement, but when I apply color, the color is appearing as overflowing/spilling beyond the dropdown.

Collectives™ on Stack Overflow

Angular Material Input and select inside one form field in single row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related