Angular 10 Material Design Tutorial & Example

Angular 10 Material Design Tutorial & Example

In this post we will give you information about Angular 10 Material Design Tutorial & Example. Hear we will give you detail about Angular 10 Material Design Tutorial & ExampleAnd how to use it also give you demo for it if it is necessary.

Throughout this tutorial, we’ll learn about using Angular Material 10 to create professional UIs.

In the previous tutorial, you have seen how you can install Angular CLI 8 and generate a brand new Angular 10 front-end. Now let’s see how we can add Angular Material 10 to our Angular application.

What’s Material Design?

Material Design is a design language created by Google in 2014. It dictates a set of principles and guidelines for creating UIs including motion (animations) and interaction (gestures).

What is Angular Material?

Angular Material is the implementation of Material Design for Angular. It offers a plethora of components and patterns for navigation, forms, buttons and layouts.

At this time, Angular Material 8 is the newest version.

In this tutorial, we’ll see how to add Material Design to Angular 10 in two ways:

  • The long way: by following a bunch of steps manually. This works for Angular 4+ versions.
  • The short way: by using the ng add command to quickly add Angular Material in one step using Angular Schematics. This method only works with Angular 6+.

Learn to build a CRM UI with navigation using Angular Material 10.

Step1: Installing Angular Material 8 and Angular CDK

Head over to your terminal, navigate inside your created Angular front-end application and then run the following commands to install Angular Material 8 and Angular 10 CDK

$ npm install --save @angular/material @angular/cdk

Step 2: Adding Support for Angular Animations

Some Angular Material components use animations so you need to add support for animations in your Angular 10 front-end application in order to enable these animations.

Head back to your terminal and run the following command to install the Angular animations module

$ npm install --save @angular/animations

Next, you only need to add this module to your app configuration. So go ahead and open the src/app/app.module.ts file then import the BrowserAnimationsModule module and add it to the list of imports:


Step 3: Adding Support for Gestures with HammerJS

Some Angular Material components depend on HammerJS for gestures support. So you need to add HammerJS to your application in order to get all the features of those components.

You can simply head to your terminal and install the library from npm:

$ npm install --save hammerjs

You’ll then need to import the library in your app entry point (main.ts)

/* [...] */import'hammerjs';if(environment.production){enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule).catch(err=>console.log(err));

Step 4: Including a Theme

Themes are required to add styles to the Material components used in your application. You can either use a custom or a pre-built theme.

Themes are CSS files. To find all the available pre-built themes you can check the @angular/material/prebuilt-themes folder in the node_modules folder in your project:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

So let’s use the deeppurple-amber.css theme for our application.

Simply open the style.css file and add the following CSS @import


Adding Angular Material 8 with ng-add and Schematics

With the release of Angular 6+, the new ng add command is available which makes it easy to add new capabilities to the project.

This command will use the package manager to download new dependencies and invoke corresponding installation scripts. This is making sure that the project is updated with dependencies, configuration changes and that package-specific initialization code is executed.

In the following, we’ll use the ng add command to add Angular Material to the previously created Angular 10 application. Head back to your command line, make sure you navigate inside your project’s folder and run the following command:

$ ng add @angular/material

By executing this command, we’re installing Angular Material 8 and the corresponding theming into the project. Furthermore new starter components are registered into ng generate.

Another popular choice is to use Angular with Bootstrap 4 to build professional UIs.


That’s it, we now have updated our Angular 10 front-end application to use Angular Material. In the next tutorial we’ll see more detailed example of using Material data-table to create tables for our data.

Hope this code and post will helped you for implement Angular 10 Material Design Tutorial & Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US