Angular Material Installation

Angular Material provides UI components that work in mobile, web, and desktop too. Angular Material is used to develop the process by reusability of common components like Cards, inputs, Data Tables, etc.

We require the following to install Angular

• Node.js
• npm
• Angular CLI
• IDE for writing the code

Node.js should be greater than 8.11, and npm should be greater than 5.6.

Node.js

Type node -v in the terminal to check the Node.js is installed on your system or not. It will help you to see the version of Node.js which is installed in our system.

If the command does not shows any result for the command., it means you have not installed Node. js correctly.

To install Node.js, go through the link https://nodejs.org/en/download/ and download the version which is suitable for your OS.

Install the package based on your Operating System. When nodejs is installed, npm will also get installed with it. Type npm -v in the terminal to check if npm is installed or not in our system. It displays the version of npm.

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

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

Angular CLI provides the interface as shown above. We can also use IDE such as, WebStorm, Atom, Visual Studio Code, etc.

Installing Angular Material

Step 1: Install the Angular CLI

Install the Angular CLI by using npm:

Step 2: Create a workspace for Angular Project

Create a workspace:

Step 3: Install Angular Material, Angular CDK, and Angular Animations

The add command will update by using the Angular CLI, perform configuration changes, and execute initialization code.

Step 4: Configure animations

Step 5: Import the Angular Material component modules

Import the component modules that are required for the application.

Examples

Examples:

Checkbox

Radio Button

Input

Button

Card

Output:

Step 6: Gesture Support

The components (mat-slider, matTooltip, mat-slide-toggle) believe on HammerJS for using gestures.

Install HammerJS, then import it on the 'main.ts' file.