Angular Material

What is Angular Material?

Angular Material is a UI component library developed by the Angular team to integrate easily with your Angular applications. This library is “specific” to the Angular framework and provides a set of reusable, accessible, well-tested components that help create a responsive modern user interface (UI).

It also provides tools that help developers to create custom UI components with common interaction patterns. Angular applications developed using Angular Material components ensure “responsiveness” on different screen sizes, such as “phones”, “tablets”, and “laptops”.

Notes! Angular Material provides a huge collection of high-quality and ready-made Angular components based on Material Design, such as input fields, forms, buttons, cards, tables, lists, etc.

Let us learn how to install Angular Material Library in your Angular project and how to use its components.

Important! This guide assumes that an Angular application has already been created and the Angular CLI has already been installed.

How to Install Angular Material in an Angular Project?

To install Angular Material Library in your Angular project or application, ensure that the Angular CLI is already installed and that the application has been created successfully.

Follow the steps given below and implement each step in your existing project one by one to install Angular Material Library:

Step 1: Open any “existing Angular project” in your preferred code editor (e.g., vs code) −

cd /go/to/materialApp

Here, materialApp is your project folder name.

Step 2: Open the terminal in your editor and go to the application directory −

cd material-app

Step 3: Add Angular Material to your application by running the following command −

ng add @angular/material

The ng add command will “install Angular Material” in your application.

Once you run the above command, Angular CLI will ask certain questions regarding “theme”, “gesture recognition”, and “browser animations”.

Select any theme of your choice and then answer positively for gesture recognition and browser animation.

✔ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [Preview: https://material.angular.io?theme=indigo-pink]
  Deep Purple/Amber  [Preview: https://material.angular.io?theme=deeppurple-amber]
  Pink/Blue Grey     [Preview: https://material.angular.io?theme=pink-bluegrey]
  Purple/Green       [Preview: https://material.angular.io?theme=purple-green]
  Custom

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink 

Set up “global Angular Material typography” styles:

? Set up global Angular Material typography styles? Yes

Include browser animations for Angular Material:

? Include the Angular animations module? (Use arrow keys)
> Include and enable animations 
  Include, but disable animations 
  Do not include 

Hint! To choose different options use the down arrow key in your keyboard.

Set up “browser animations” for Angular Material:

Importing the BrowserAnimationsModule into your application enables Angular’s animation system.

Once the Material gets installed successfully you will be able to see the message below:

UPDATE package.json (1111 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.config.ts (338 bytes)
UPDATE angular.json (2795 bytes)
UPDATE src/index.html (520 bytes)
UPDATE src/styles.css (181 bytes)

The ng add command will additionally perform the following actions:

• Add project dependencies to package.json.

"@angular/material":"^17.3.10"

Add the Roboto font to your index.html

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

Add the “Material Design icon font” to your index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Add a few global CSS styles to:

• Remove margins from “body”.
• Set height 100% on HTML and body.
• Set Roboto as the default application font.

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Completed! Angular Material is now configured to be used in your Angular application.

How to use Angular Material in Angular Project?

To use the Angular Material Components in your Angular project implement the following steps:

Step 1: Open the “Angular Material” website on your browser:

Angular Material Components

Step 2: Open the component (e.g., button) which you want to use:

Step 3: Go to the API section and copy the import:

Step 4: Import the “relevant API” in your component or module where you want to use:

import{ Component }from'@angular/core';import{ CommonModule }from'@angular/common';import{ RouterOutlet }from'@angular/router';import{MatButtonModule}from'@angular/material/button';@Component({
  selector:'app-root',
  standalone:true,
  imports:[CommonModule, RouterOutlet, MatButtonModule],
  templateUrl:'./app.component.html',
  styleUrl:'./app.component.css'})exportclassAppComponent{
  title ='material-app';}

Step 5: Go to the examples section and you will see various examples of button components:

Step 6: Open the AppComponent (i.e., app.component.htm) and place the code below to see the different types of buttons:

<h2>Welcome to Angular Material Example</h2><button mat-button>Basic</button><button mat-raised-button>Basic</button><button mat-button disabled>Disabled</button><button mat-flat-button>Basic</button>

Here,

• mat-button is the class name for the “basic button”.
• mat-button disabled is the class name for the ‘disabled button.

Step 6: Run your application to see the changes:

ng serve

Then navigate your browser to http://localhost:4200 URL.

Here, the application clearly shows the Angular different Material buttons.

List of Common used Components

Below is the some of the important UI elements provided by Angular Material package:

UI Element	Description
Form field	The <mat-form-field> is a component used to wrap several Angular Material components.
Input	The matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>.
Checkbox	The <mat-checkbox> provides the same functionality as a native <input type=”checkbox”> enhanced with Material Design styling and animations.
Radio button	The <mat-radio-button> provides the same functionality as a native <input type=”radio”> enhanced with Material Design styling and animations.
Select	The <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element.
Button	The Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples.
DatePicker	The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.
List	The <mat-list> is a container component that wraps and formats a series of <mat-list-item>.
Card	The <mat-card> is a content container for text, photos, and actions in the context of a single subject.
Grid list	The mat-grid-list is a “two-dimensional” list view that arranges cells into “grid-based” layout.
Table	The mat-table provides a Material Design styled data-table that can be used to display rows of data.
Paginator	The <mat-paginator> provides navigation for paged information, typically used with a table.
Tabs	Angular Material tabs organize content into separate views where only one view can be visible at a time.
Toolbar	The <mat-toolbar> is a container for “headers”, “titles”, or “actions”.
Menu	The <mat-menu> is a floating panel containing list of options.
Dialog	The MatDialog service can be used to “open modal dialogs” with Material Design styling and animations.
Snackbar	The MatSnackBar is a service for displaying snack-bar notifications.
Progress bar	The <mat-progress-bar> is a horizontal progress-bar for indicating progress and activity.
Icon	The mat-icon makes it easier to use vector-based icons in your app.
Divider	The <mat-divider> is a component that allows for Material styling of a line separator with various orientation options.

Why to use Angular Material?

Use Angular Material because it provides built-in UI components that are easy to integrate with Angular applications, saving developers time by offering ready-to-use elements like “buttons”, “cards”, and “input” fields. It also ensures the application is “responsive” and fully functional across various screen sizes.