How to align 'search' box to the right side in angular mat table?

Question

I am using mat-card such that add button and search box need to be aligned horizontally in a single line. I want add to be on left side and search to be on the right side.

I have written following html but search is not aligning to the right side.

<div class="page-container">
    <mat-card class="mat-elevation-z3">
        <mat-card-title>Test Data</mat-card-title>
        <form layout-align='center center' layout='column'>
            <mat-form-field style="justify-content: flex-start">
                <button  mat-raised-button (click)="addClick()" color="primary" mat-raised-button>
                    <mat-icon>add_box</mat-icon>Add
                </button>
            </mat-form-field>
            <mat-form-field style="justify-content: flex-end">
                <input (keyup)="doFilter($event.target.value)" matInput placeholder="Search" type="text">
            </mat-form-field>
        </form>
    </mat-card>
</div>

I am also getting an error - ERROR Error: mat-form-field must contain a MatFormFieldControl.

UkFLSUI · Accepted Answer · 2020-08-13T18:01:02.283

First of all, you were trying to use flexbox, but there is no flex container declared.
You need to add display: flex to the parent element for its child to be flex element.
For aligining your search box to the far right, you can use margin-left: auto.

<div class="page-container">
    <mat-card class="mat-elevation-z3">
        <mat-card-title>Test Data</mat-card-title>
        <form layout-align='center center' layout='column' style="display: flex">
            <mat-form-field>
                <button  mat-raised-button (click)="addClick()" color="primary" mat-raised-button>
          <mat-icon>add_box</mat-icon>Add
        </button>
            </mat-form-field>
            <mat-form-field style="margin-left: auto">
                <input (keyup)="doFilter($event.target.value)" matInput placeholder="Search" type="text">
      </mat-form-field>
        </form>
    </mat-card>
</div>

For solving 2nd problem of your question, you can directly follow the official troubleshooting instruction:

Error: mat-form-field must contain a MatFormFieldControl

This error occurs when you have not added a form field control to your form field. If your form field contains a native or element, make sure you've added the matInput directive to it and have imported MatInputModule.

How to align 'search' box to the right side in angular mat table?

1 Answers1