Angular Material Appearance: fill and outline

By Arvind Rai, April 30, 2024
In this article, we will learn to configure appearance of <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> 
Input element will be displayed as filled background box and an underline.
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> 
Input element will display a border all the way around.

Change Default Appearance Globally

If we don't specify appearance property in <mat-form-field>, then by default fill appearance is displayed.
Find the code.
<mat-form-field>
  ------
</mat-form-field> 
The elements in the above <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> 
user.component.ts
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 {
} 
app.config.ts
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' } }
  ]
}; 
Find the print-screen of the output.
Angular Material Appearance: fill and outline

Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us