Angular Material Appearance: fill and outline
April 30, 2024
<mat-form-field> in our Angular Material application.
Appearance in <mat-form-field>
<mat-form-field> is a component that wraps several material components and apply common styles such as underline, floating label, and hint messages.
<mat-form-field> wraps the component such as input element, textarea and select box.
<mat-form-field> provides appearance property that can have two values as fill and outline.
In fill appearance, form-field displays a filled background box and an underline.
In outline appearance, form field shows a border all the way around.
If we don't specify appearance, then by default fill appearance is applied
<mat-form-field>.
To specify appearance, use appearance property of
<mat-form-field>.
<mat-form-field appearance="fill"> ------ </mat-form-field> <mat-form-field appearance="outline"> ------ </mat-form-field>
'fill' and 'outline' Appearance with Input
1. fill<mat-form-field appearance="fill"> <mat-label>Appearance - fill</mat-label> <input matInput> <mat-icon matSuffix>volume_down</mat-icon> <mat-hint>Volume level</mat-hint> </mat-form-field>
2. outline
<mat-form-field appearance="outline"> <mat-label>Appearance - outline</mat-label> <input matInput> <mat-icon matSuffix>two_wheeler</mat-icon> <mat-hint>Ride</mat-hint> </mat-form-field>
Change Default Appearance Globally
If we don't specifyappearance property in <mat-form-field>, then by default fill appearance is displayed.
Find the code.
<mat-form-field> ------ </mat-form-field>
<mat-form-field>, will display fill appearance.
We can change the default appearance by global setting in providers.
Suppose we want to set default appearance as outline in standalone Angular application, configure appearance in providers as below.
bootstrapApplication(AppComponent, {
providers: [
{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
]
});
Complete Example
user.component.html
<h3>Input with 'fill'</h3>
<mat-form-field appearance="fill">
<mat-label>Enter name</mat-label>
<input matInput>
<mat-icon matSuffix>person</mat-icon>
<mat-hint>Name</mat-hint>
</mat-form-field>
<h3>Input with 'outline'</h3>
<mat-form-field appearance="outline">
<mat-label>Enter city</mat-label>
<input matInput>
<mat-icon matSuffix>location_city</mat-icon>
<mat-hint>city</mat-hint>
</mat-form-field>
<h3>Textarea with default</h3>
Here default is <b>outline</b>.
<p>
<mat-form-field>
<mat-label>Leave a message</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</p>
<h3>Select with 'fill'</h3>
<mat-form-field appearance="fill">
<mat-label>Select tech</mat-label>
<mat-select>
<mat-option value="Java">Java</mat-option>
<mat-option value="Python">Python</mat-option>
<mat-option value="Angular">Angular</mat-option>
<mat-option value="Spring">Spring</mat-option>
</mat-select>
</mat-form-field>
import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
@Component({
selector: 'app-user',
standalone: true,
imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatSelectModule],
templateUrl: 'user.component.html'
})
export class FileUploadComponent {
}
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
export const APP_CONFIG: ApplicationConfig = {
providers: [
provideAnimations(),
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
]
};
