Building World-class Apps with Angular Material

Angular Material has been one of the most popular component libraries for Angular developers in recent times. In this article, we will discover the reasons for its popularity, learn how to set up a new Angular Material app and customise it with your own theme and typography.

Often times, the difference between an app that merely serves its purpose and one that delivers a great experience, is determined by the amount of thought and effort that goes into the smallest details of the individual components.

These aspects are all addressed by Material Design, which is a design system created by Google exclusively for building digital experiences. They use it across their vast suite of services, on web and mobile. 

Material Design is inspired by the real world - concepts such as textures, light and shadow are used to specify guidelines for layout, navigation, typography and many other aspects of a user interface.

Having to focus on all these aspects when developing individual apps will slow down a team or developer significantly. It would be great if there was a pre-built library of components that had all these considerations baked in, so we could then use it to build apps that automatically look and feel great! ✨

Angular Material aims to do exactly that - it is the official implementation of Material Design for the Angular Framework and is built by the Angular team. It provides a set of versatile, reliable and internationalized components that work across platforms. It also provides a Component Development Kit(CDK) to help developers implement their own components. The components are highly customizable but within the bounds of the Material Design specifications, which means that your app will always conform to standards of accessibility and ease of use.

The instructions in this article have been tested with Angular CLI 

, which are the current versions at the time of publishing.

Getting Started with Angular Material 🏁

The Angular Material team has implemented an 

 schematic to automate the installation of the library and all the associated tasks.

Each Angular Material component is exported as part of its own 

. To use a component, you must add the required 

 array of the module you want to use it in.

For example, if you wanted to use the Card component, you would import the 

import { MatCardModule } from '@angular/material/card';

@NgModule ({
  ...
  imports: [
    ...,
  	MatCardModule,
  ],
  ...
})

Once you've imported the module, you can use the card component in your template.

<mat-card>Hey there! I'm a card</mat-card>

 also exports a number of directives that can be used to structure content within a card, such as 

The general rules for instantiating Angular Material components and directives in your templates are:

Scaffolding Components with Material Schematics 🏗

 schematics for adding Angular Material to your project, there are also 

 schematics available which can be used to generate composite Angular Material components to suit your use case.

You can run these schematics using the command:

ng generate @angular/material:<schematic-name>

Creating a Custom Angular Material Theme 🎨

Now that we have seen how to get set up and use Angular Material components in our apps, let's dive into one of the more complex, relatively less explored parts of the framework - Theming.

As we've seen earlier, you can choose either a pre-built or a custom theme when adding Angular Material to your app.

If you choose one of the pre-built themes, the path to the CSS file for the selected theme is added to the 

If you choose a custom theme, this path is not added. Instead, the global 

 file is updated with the necessary ingredients to create your own Angular Material theme.

The contents of this file may appear a bit cryptic to start with.


// Custom Theming for Angular Material
// For more information:
// https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material.
// We include this here so that you only
// have to load a single css file
// for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme
// using the Material Design palettes available in palette.scss
// (imported above).
// For each palette, you can optionally specify a default,
// lighter, and darker hue.
// Available color palettes: https://material.io/design/color/
$material-custom-primary: mat-palette($mat-indigo);
$material-custom-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$material-custom-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$material-custom-theme: mat-light-theme((
  color: (
    primary: $material-custom-primary,
    accent: $material-custom-accent,
    warn: $material-custom-warn,
  )
));

// Include theme styles for core
// and each component used in your app.
// Alternatively, you can import and @include
// the theme mixins for each component that you are using.
@include angular-material-theme($material-custom-theme);

/* You can add global styles to this file, and also import other style files */

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}


To understand this better, let's look at it line by line.

 file from the Angular Material module. If we look at the 

 for Angular Material, we can see that this file is generated by bundling together all the style files from various places in the codebase.

 confirms this - it imports all the styles relating to the core components, theming, colours etc.

Here is a simplified picture of how the Angular Material theming system works.

 which includes all the non-theme-related styles, and 

 which includes all theme-related styles.

This adds all the non-theme related styles to our app.

The next few lines define three color palettes for use in the app - a primary palette for regular use, an accent palette for emphasising elements, and a warning palette for errors and warnings:

$material-custom-primary: mat-palette($mat-indigo);
$material-custom-accent: mat-palette($mat-pink, A200, A100, A400);
$material-custom-warn: mat-palette($mat-red);

In this case, the palettes used are pre-built ones provided by Angular Material.

We can also define our own color palettes according to the 

A color palette uses a base color, and specifies different variants of it to use at various levels of brightness. It looks somewhat like this:

/* For use in src/lib/core/theming/_palette.scss */
$my-palette: (
    50 : #e8eaf6,
    100 : #c5cbe9,
    200 : #9fa8da,
    300 : #7985cb,
    400 : #5c6bc0,
    500 : #3f51b5,
    600 : #394aae,
    700 : #3140a5,
    800 : #29379d,
    900 : #1b278d,
    A100 : #c6cbff,
    A200 : #939dff,
    A400 : #606eff,
    A700 : #4757ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);


The color used for brightness level 500 is the default, so this palette is based on the color 

. Lower numbers here indicate higher brightness and vice versa. The 

 section specifies which color should be used as a contrasting color, in text for example, when a color is being used at a certain brightness level.

We can now use this palette in our theme as follows:

$material-custom-primary: mat-palette($my-palette);

$material-custom-theme: mat-light-theme((
  color: (
    primary: $material-custom-primary,
    accent: $material-custom-accent,
    warn: $material-custom-warn,
  )
));

 which influence the colors used for elements and backgrounds - 

 uses dark elements and light backgrounds, and 

 uses light elements and dark backgrounds.

The material design spec defines guidelines for 

. In Angular Material, these are implemented via CSS classes. There are classes such as 

 etc. which can be used to style text in terms of font type, font size and line height.

Since it might be a bit cumbersome to have to specify these classes each time you add an element of text, Angular Material provides an easier way to automatically add these styles.

, and this will automatically add the correct typographical styles to descendant elements.

Angular Material uses the Roboto font by default. If you'd like to customize this, and other aspects of the typography, you can create your own custom configuration.

$custom-typography: mat-typography-config(
  $font-family: 'Comic Sans MS',
  $headline: mat-typography-level(48px, 60px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
);

Here, we are overriding the font family and the config for the 

 mixin. This takes three arguments - a font size, a line height and a font weight.

In this article, we have learnt how to set up Angular Material in an Angular app.

We have also discovered how to leverage Angular Material's built-in schematics to generate components for specific use cases.

We have explored in-depth the workings of the Angular Material theming system. We have then used this understanding to define custom themes and color palettes for our apps. 

Finally, we have understood how to use Angular Material's typographical styling and override it with a custom configuration.

Angular Material is very easy to get started with, but it can get fairly complicated quite quickly when trying to customize its behaviors according to your needs. Here's hoping that this article has shed some light on the complicated parts of Angular Material, and makes it easier for you to adapt it into your projects! 🚀

 are a great place to get started learning various aspects of the library.

 to understand how Angular Material works under the hood.

 generates Angular Material color palettes for any base color - super useful when you are creating a custom theme from scratch.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building World-class Apps with Angular Material

Responses (1)

Masterclasses

Tutorials

Fullstack React with TypeScript