Installation of Angular Material

Posted at: April 2, 2019 6:49 PM

What is Angular Material?

Angular material design is a collection of angular components. These components help to create modern, attractive and fully responsive design for web and mobile applications very easily. Material Design provides great UI/UX. In this chapter, we will learn how to install Angular Material?

Install Angular Material, Angular CDK and Angular Animations

First, create angular project. If already created, then follow these steps.

@angular/cdk: CDK (Component Development Kit) is a standalone package. This is a set of tools for building components that do not depend on Angular Material. CDK is to give developers more tools to build awesome components for the web. Tools like as drag and drop, change in the application's LTR/RTL layout direction, floating panels on the screen, provides utilities to build responsive UIs.

@angular/animations: For animation support in your application.

Once the animation package is installed, import BrowserAnimationsModule into your application for enabling animations.

You can import this animation module into your AnyCustomModule or AppModule

app.modules.ts

Alternatively, you can disable animations by importing NoopAnimationsModule.

Gesture Support

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

After installing, import it on your app's entry point (e.g. src/main.ts).

Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

Some pre-built themes are available, include one of pre-built themes in styles.css

Import the component modules

Import the NgModule for each component you want to use

Best way, You should create your own custom NgModule MyCustomMaterialModule and import all material components into this MyCustomMaterialModule. And by exporting them again, others module can simply import this MyCustomMaterialModule and automatically get all exported material modules. For details

You must be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules.

Example

For creating a checkbox, import MatCheckboxModule into AppModule.

app/app.module.ts

app/app.component.html

This lesson also available on YouTube
install angular material angular material install setup angular material angular material

Please leave comments

4 Comments