In Angular Material, you can create a more compact form field by using the
Density directive. This directive allows you to adjust the spacing between elements in a form field, making it more compact.
To use the
Density directive, you can apply it to the form field container element. For example:
<mat-form-field [density]="'compact'"> <!-- form field content goes here --> </mat-form-field>
This will create a more compact form field with reduced spacing between elements.
If you don’t want to display the label or hint for the form field, you can simply omit them from the template. For example:
<mat-form-field [density]="'compact'"> <mat-icon matPrefix>person</mat-icon> <input matInput placeholder="Username"> </mat-form-field>
This will create a compact form field with an icon as a prefix, but no label or hint.
Last modified: March 3, 2023