Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Sep 1st 2017

Angular Material is a set of high-quality UI components developed by the Angular team, based on the Google Material design specification. These components help us to build applications with an attractive, yet familiar UI, giving users a consistent experience across devices.

In this Angular tutorial, you will learn how to set up material design in your Angular app. In the course of this tutorial, we will be using Angular IDE. Let’s get started by firing up our Angular IDE and creating a new Angular project named AngularMaterialTutorial.




Install Angular Material and its Dependencies

Once the project is created, we can now install additional node modules to our project. Angular IDE has a terminal view from which we can execute commands, so from the menu select Window, then Show view then click Terminal+. In the opened terminal, type the following commands to install HammerJS, Angular Material and Angular CDK.

We installed HammerJS because some of the Angular Material components depend on HammerJS for gestures. Modern Angular projects already include the Angular animations module (@angular/animations), but if you happen to be following along with an older version of the CLI or Angular, please install that as well.

Using Angular Material Themes

Before we move on to actually using the widgets, let’s get our styles set up.

Material includes a few prebuilt themes that you can find at node_modules/@angular/material/prebuilt-themes. If you open that location, you’ll probably notice the following themes:

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

In our tutorial, we’re going to use the first  – deeppurple-amber, by adding the following line to our global styles file at /src/styles.css

We’re also going to be using font ligatures, for which we need to add the following line to the head section of our /src/index.html file, to bring in the Material icons font.

Using Angular Material Components

In this tutorial, we’re going to use a few material buttons, a snackbar, and a menu. We will begin by importing a number of these modules into the app.module.ts file – for now you can replace the module’s source with the snippet below, but remember, when you’re working with the source, you can use content assist to have the import automatically added for you, as you can see below.



Replace the source of the app.components.ts file with the source below, this is really the boilerplate component with an additional openSnackBar method that we will use in our template.


Finally, replace the app.component.html file’s contents with the snippet below. Again, remember that in Angular IDE, Angular content assist is available even within HTML templates.




  • We’ve used font ligatures, which convert “home” within the md-icon element into a home image instead of displaying the text.
  • The color attribute allows us to set the color of icons, buttons, and other widgets as well, by specifying values like primary, accent, or warn. The actual color used would vary from one theme to another.
  • The md-menu element itself does nothing, this menu must be triggered from another widget, as we have done using a button.
  • Unless the modules corresponding to these widgets are imported, which we did in app.module.ts, you will see errors in your template, autocompletion will not work, and of course, the widgets themselves will be defunct in your app.

Deploying the Application

Allright! It’s time to see our app in action. From the Servers view, expand the Angular CLI node and select AngularMaterialTutorial. From the toolbar, choose Start Server.


Use the Run or Debug context menu actions to automatically open the app in Chrome, or manually open in your browser to see the app in action.

Our app should finally look like this:



Angular Material is finely tuned for performance, and fully tested across modern browsers and devices. Whether you’re browsing on a desktop, laptop, tablet, or phone – your app looks great and gives users a solid, capable, browsing experience.

We’ve explored only a few of the Angular widgets in this tutorial, but there are dozens more – you should have no problems utilizing these using similar steps.