Angular Material Installation

Angular Material is a popular UI framework for building user interfaces with the Material Design style, widely used by web developers around the world. It is a set of reusable UI components and guidelines for building web applications with the Material Design language, which is developed by Google. It is built on top of Angular, a popular JavaScript framework for building web applications, and provides a consistent look and feels across all platforms.

In this article, we will see the process of installing and setting up Angular Material in the project, along with understanding its basic implementation through the illustration.

Installation procedure for Angular Material: To get started, we’ll need to have the Angular CLI installed on our local machine. If don’t already have the CLI installed, you can install it by running the following command:

npm install -g @angular/cli

Once you have the Angular CLI installed, create a new Angular project by running the following command:

ng new my-project

Replace “my-project” with the name of your project. This will create a new Angular project with all the necessary files and dependencies.

Configuring the Project: Next, we’ll need to install the Angular Material library and its dependencies. We can do this by navigating to the project directory and running the following command:

cd my-project
ng add @angular/material

We will be prompted to choose your prebuilt theme, and your preferences for the Angular animations module during the installation process.

This will install the Angular Material library and its dependencies, and also update your Angular project with the necessary configuration for using Angular Material components.

You can update the Angular Material configuration by adjusting the code in the angular.json file. By default, the following configuration was created:

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "my-project:build:production"
            },
            "development": {
              "browserTarget": "my-project:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-project:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Project Structure: This is a basic and common project structure, & the directory structure of our project (here, named ‘my-project’) will look like this:

Example 1: This article describes the basic implementation of Angular Material.

app.component.html:

HTML

<mat-card>
    <mat-card-header>
        <mat-card-title>
            GeeksforGeeks
        </mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <p>
            This article describes the Angular Material
            installation process in detail.
        </p>
    </mat-card-content>
</mat-card>

app.component.css:

CSS

mat-card-title {
  color: green;
}

mat-card {
  text-align: justify;
  border: 1px solid black;
  width: 355px;
  padding: 5px;
}

app.module.ts:

Javascript

import { BrowserModule }
     from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MatCardModule }
    from '@angular/material/card';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatCardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

To run the project, type the following command in the terminal:

npm run start

Output:

Example 2: This is another example that illustrates the Angular Material Installation by implementing the Material Card.

app.component.html:

HTML

<mat-card>
    <mat-card-header>
        <mat-card-title>
            <h1>GeeksforGeeks</h1>
        </mat-card-title>
        <mat-card-subtitle>
            <h3>
                  Angular Material Installation
              </h3>
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            Angular Material is a UI component library
            for Angular applications. It provides a set
            of reusable UI components that are easy to
            customize and integrate into your application.
        </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button style="background-color: red;
                                  color: white">
            Like
        </button>
        <button mat-button style="background-color: blue;
                                  color: white">
            Share
        </button>
    </mat-card-actions>
</mat-card>

app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

app.module.ts:

Javascript

import { BrowserModule }
     from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MatCardModule }
    from '@angular/material/card';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatCardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.css:

CSS

p {
  font-family: "Lato", sans-serif;
  text-align: justify;
}

.example-card {
  max-width: 450px;
  margin: 10px;
}

mat-card-subtitle {
  font-size: 18px;
}

mat-card-title {
  color: green;
  font-size: 55px;
  justify-content: center;
  display: flex;
}

To run the project code, type the following command in the terminal:

npm run start

This will start the Angular Live Development server, to access your project, paste the following URL on any browser in your system:

http://localhost:4200/

Output:

In conclusion, Angular Material is a powerful UI framework that makes it easy to add professional-grade components to your Angular application. By following the steps outlined in this article, you can quickly and easily install and set up Angular Material in your project, and start using its wide range of components to build user interfaces that look and feel great. Whether you’re a seasoned web developer or just starting out, Angular Material is a great choice for building modern, professional-grade user interfaces.

Reference: https://material.angular.io/guide/getting-started