Angular Material - Environment Setup

This tutorial will guide you on how to prepare a development environment to start your work with Angular Framework and Angular Material. In this chapter, we will discuss the Environment Setup required for Angular Material. To install Angular, we require the following −

• Nodejs

• Npm

• Angular CLI

• IDE for writing your code

Nodejs has to be greater than 8.11 and npm has to be greater than 5.6.

Nodejs

To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system.

C:\>node -v
v24.11.0

If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS.

The homepage of nodejs will look like the following −

Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm.

C:\>npm -v
11.6.1

Angular Material installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command.

Type npm install -g @angular/cli, to install angular cli on your system.

C:\>npm install -g @angular/cli

added 121 packages, removed 48 packages, and changed 226 packages in 22s

65 packages are looking for funding
  run `npm fund` for details

Once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc.

Install Angular Material

Run the following command to install Angular Material module and its related components in the project created.

materialApp>npm install --save @angular/material

+ @angular/material@20.2.11
updated 1 package in 39.699s

Add the following entry in app.module.ts file

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

imports: [
    ...
   FormsModule,
   ReactiveFormsModule,
   BrowserAnimationsModule
],

Add the following entry in styles.css file to get a theme.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Add the following entry in index.htm file to get a material icons support.

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