
What is Material UI?
Angular Material is a UI component library. Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation.
Use the following command to add material UI in your Angular project.
ng add @angular/material
The ng add command will install Angular Material and ask you the following questions to determine which features to include:
The “ng” command will additionally perform following configurations in the project.
Below are the some of the examples on how to create a Material UI component and customize it.
Before you make use of any component, you need to import it in the app.module.ts file, like below
import { MatSliderModule } from '@angular/material/slider';
....
@NgModule({
....,
imports: [
...
MatSliderModule
...
]
...
})
Add the <mat-slider> tag to the component like below.
<mat-slider min="1" max="100" step="1" value="1"></mat-slider>
By default sliders are horizontal with the minimum value on the left and the maximum value on the right. But you can customize it by using some props.
Example:
The vertical attribute can be added to a slider to make it vertical with the minimum value on bottom and the maximum value on top.
<mat-slider min="1" max="100" step="1" value="1" vertical></mat-slider>
Invert
An inverted horizontal slider will have the minimum value on the right and the maximum value on the left, while an inverted vertical slider will have the minimum value on top and the maximum value on bottom.
<mat-slider min="1" max="100" step="1" value="1" invert></mat-slider>
By default, the exact selected value of a slider is not visible to the user. However, this value can be added to the thumb by adding the thumbLabel attribute.
<mat-slider thumbLabel tickInterval="1"></mat-slider>
It is a is a two-dimensional list view that arranges cells into grid-based layout.
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>India</mat-grid-tile>
<mat-grid-tile>Australia</mat-grid-tile>
<mat-grid-tile>South Africa</mat-grid-tile>
<mat-grid-tile>NewZealand</mat-grid-tile>
</mat-grid-list>
You can set the number of columns using the “cols” attribute. The height of the rows in a grid list can be set via the rowHeight attribute.
Row height for the list can be calculated in three ways:
If rowHeight is not specified, it defaults to a 1:1 ratio of width:height.
It is possible to set the rowspan and colspan of each ‘mat-grid-tile' individually, using the rowspan and colspan properties. If not set, they both default to 1. The colspan must not exceed the number of cols in the mat-grid-list. There is no such restriction on the rowspan however, more rows will simply be added for it the tile to fill.
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile colspan="2">India</mat-grid-tile>
<mat-grid-tile>Australia</mat-grid-tile>
<mat-grid-tile>South Africa</mat-grid-tile>
<mat-grid-tile>NewZealand</mat-grid-tile>
</mat-grid-list>
The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
You can specify the date range by using the “mat-date-range-input” and ”mat-date-range-picker” components. Mat-date-range-input takes two input elements for the start date and end date.
<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
It is a form control for selecting a value from a set of options. To add options to the select, add <mat-option> elements to the <mat-select>.Each <mat-option> has a value property that can be used to set the value that will be selected if the user chooses this option. The content of the <mat-option> is what will be shown to the user.
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option>Pizza</mat-option>
<mat-option>Burger</mat-option>
<mat-option>3<mat-option>
<mat-option>4</mat-option>
</mat-select>
</mat-form-field>
The <mat-select> supports 2-way binding to the value property without the need for Angular forms.
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select [(value)]="selected">
<mat-option value="Pizza">Pizza</mat-option>
<mat-option value="Burger">Burger</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
<p>Selected Food : {{selected}}</p><mat-option value="Pizza">Pizza</mat-option>
<mat-option value="Burger">Burger</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>