Angular 8 Material Design Tutorial & Example

Angular 8 Material Design Tutorial & Example

Throughout this tutorial, we'll learn about using Angular Material 8 to create professional UIs. In the previous tutorial, you have seen how you can install Angular CLI 8 and generate a brand new Angular 8 front-end. Now let's see how we can add Angular Material 8 to our Angular application...

Throughout this tutorial, we'll learn about using Angular Material 8 to create professional UIs. In the previous tutorial, you have seen how you can install Angular CLI 8 and generate a brand new Angular 8 front-end. Now let's see how we can add Angular Material 8 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 8 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+.

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 8 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 8 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:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [
    BrowserModule, BrowserAnimationsModule
],

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

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

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 8 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.

Conclusion

That's it, we now have updated our Angular 8 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.

angular

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

Angular Platforms in depth. Part 1. What are Angular Platforms?

The Angular framework was designed to be a platform independent. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Articles: *