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
Please leave comments
4 Comments
