Angular - Angular Material

Previous
Quiz
Next

This chapter will guide you how to setup your Angular project to start using Angular Material. It includes prerequisites, installing angular material, and an example of using a sample material component in your application to verify your setup.

What is Angular Material?

Angular Material is a UI library developed by the Angular team to integrate easily with Angular applications. This library is "specific" to the Angular framework, providing internationalized and accessible components for everyone. It is well-tested to ensure performance and reliability.

It is also provides tools that help developers to build their own custom components with common interaction patterns. The Angular applications developed using Angular Material components ensure "responsiveness" across various 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.

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

Important! This guide assumes that the Angular CLI has already been installed.

How to install Angular Material?

To install Angular Material 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 application one by one to install Angular Material:

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?

    To use the Angular Material component in your application 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'
})
export class AppComponent {
  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.

    Advantages of Angular Material

    Here is a list of some "key" advantages of the Angular Material:

    • In-built Components: It provides In-built wide range of UI component that are ready-to-use.
    • Responsive Layouts: It helps create responsive layouts that work well on different devices and screen sizes.
    • Easy Integration: It is very easy to integrate with any Angular Application new as well as existing.
    Print Page
    Previous
    Next
    Advertisements