Integrate material UI with Angular

Bhagyashree Purushottam Sail

11 Apr 2022

How to Integrate material UI with Angular

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.

Integration with Angular Project

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:

Choose a prebuilt theme name, or "custom" for a custom theme.
Select whether to set up global Angular Material typography styles.
Select whether to set up browser animations for Angular Material.

The “ng” command will additionally perform following configurations in the project.

Add project dependencies in the package.json.
Add the Roboto font in your index.html.
Add Material Design icon front to your index.html
Add few global CSS styles to:
Set height : 100% on html and body
Set Roboto as default application font.
Remove margins from body.

Display Material UI component

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 
 ...
 ]
 ...
 })

Mat-Slider

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:

Vertical

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>

Thumb Label

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>

Mat-grid-list

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:

Fixed height: The height can be in px, em, or rem. If no units are specified, px units are assumed (e.g. 100px, 5em, 250).
Ratio: This ratio is column-width:row-height, and must be passed in with a colon, not a decimal (e.g. 4:3).
Fit: Setting rowHeight to fit This mode automatically divides the available height by the number of rows. Please note the height of the grid-list or its container must be set.

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>

Mat-datepicker

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>

Mat-select

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>