Software systems to innovate and grow

A Beginner’s Guide to Angular Material 2

By Engineering Team June 18, 2018 10 mins read

With all the talk of Angular 4, Angular 5, and progressive web apps over the last few months, even the most well-informed developer could be forgiven for not being up to speed on all the new capabilities being added to Angular Material.

UI development can sometimes become an afterthought when building new apps, especially for frontend developers new to the game. Business logic, storage, and deployment decisions are critical to success, but a design strategy is just as important.

People will use an ugly, well-executed app, but do you really want to take that chance?

Luckily, the Angular Team has you covered, and so do we.

What is Material Design?

Back in 2014, Google decided to expand on their design spec for Google Now, fleshing out the grid-based layouts, animations, and responsive cards used extensively in the now defunct service.

“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch,” said the VP of Design at Google, Matias Duarte.

The idea was to implement a new design for Android primarily, something mobile-friendly that could help standardize the Android platform. But, Material eventually became the design spec for all Google apps and projects, including Angular.

Most developers understand Material as an alternative to Bootstrap, by far the most popular frontend design library in web development. Someone has even made an open source toolkit that combines the two, hoping to capture the best of both methodologies.

And, while Material can be used for essentially any type of app (web, Android, PWA, etc.), the Angular Team decided to integrate it into Angular in a way that would encourage and promote its use.

Angular Material 2: The Way Forward

The stated goal of Angular Material 2 is to, “build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.”

The team goes on to clarify what they mean by, “high-quality”:

  • Internationalization & Accessibility
  • Straightforward APIs
  • Well-Tested & Predictable
  • Customizable (within the Material Design spec)
  • Optimized for Performance
  • Clean Code

In other words, the Angular Team wants you to use Material components in your apps, and they are trying their best to make that decision a no-brainer, especially with the newer versions of Angular.

Getting Started

Now that we know where Angular Material came from and why we should use it, let’s take a look at how we can use it.

We are going to assume you already have the Angular CLI installed and know how to start a project. If not, please see the official site for those details.

Note: The newest version of Angular Material requires Angular 4+, so keep that in mind.

Installing Angular Material & the CDK

Of course, you can use the npm or yarn CLI to install Angular Material packages:

NPM

Yarn

Note: The Snapshot Build with the latest changes from master is an alternative option here, but we do not recommend it unless you enjoy managing instability in your projects.

Installing Animations

Most greenfield apps are going to make use of animations in some way (mostly for transitions), which requires the @angular/animations module.

Two things to keep in mind here:

  1. The animations module uses the WebAnimation API, which is not yet available in all browsers. Expect to use a polyfill for now to get full coverage.
  2. Don’t forget to import the BrowserAnimationModule before implementing animations. Alternatively, you can use the NoopAnimationModule utility for testing or for platforms that are too slow for animations.

NPM

Yarn

And, to implement:

The Custom Material Module

Up until the beta.3 version of Angular Material 2, you could import a MaterialModule into the app module and make all the components available in a project. In fact, you still can.

However, it’s been deprecated in favor of a custom Material module due to tree-shaking inefficiencies, and we recommend going with Angular on this one.

To create the custom module:

Once generated, simply add the necessary Material components you’d like to use like so:

HammerJS

HammerJS is a small library that can recognize gestures and is required by some Angular Material components. Most developers install it by default even if they are not sure they will need it due to its small size (7.34kB zipped!).

To install with a package manager:

NPM

Yarn

Note: Don’t forget to import it to your app’s entry point:

Material Themes

In order to apply all the core styles to your app, you have to select and include a theme.

As of this writing, there are four pre-built theme options in Angular Material:

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

If you are using the Angular CLI, you can just add this line to your styles.css:

Note: You can also use a element in your index.html file.

Of course, you are free to create your own themes, too. For more on that, check out the official Angular Material theming guide.

Material Icons

Though not required for functionality, Material Icons are incredibly useful and are worth including in your Material apps. Similar to themes, you can bring them in with a standard element in your index.html file:

Wrapping Up

Once you have your Angular app set up for Material, you can start using the extensive set of UI components at your disposal to prettify and elevate the user experience, and with very little time spent on the implementation.

Whether you are just trying to reach minimum viable product status or you plan to leverage Material for the long term, the Angular Team has made UI considerations a breeze for developers going forward.

Remember to stay active in the Angular community, keep learning, and as always, console.log(‘happy coding!’);