Utilizing mat-card, I need the add button and search box to be aligned horizontally in a single line. Specifically, I want the add button on the left side and the search box on the right side.
I have crafted the following html structure, but unfortunately, the search element is not aligning to the right as intended.
<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>
In addition, an error message appears -
ERROR Error: mat-form-field must contain a MatFormFieldControl.