Optimized Angular Material Setup

Part three of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — মেঘে ঢাকা তারা / The Cloud-Capped Star (1960)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup
Part 1 — Angular Component and Routing Setup
Part 2 — Styling Framework Setup

Including Angular Material

It is now time to include the final weapon in our styling framework arsenal — Angular Material, the silver bullet solution to your common Material needs.

Preparing the Angular Material code structure

Firstly, we will install via the following command —
ng add @angular/material

We will choose the following options while installing Angular Material —

Angular Material installation options

Secondly, we will remove the fonts added by the installation to index.html and styles.scss. As we will be using our custom icons, we will also remove the Material Icons in the index.html.

We will remove the below highlighted changes made to index.html

Changes to index.html that are to be removed

We will remove the below highlighted changes made to styles.scss

Changes to styles.scss that are to be removed

Next, we will move the changes added to the styles.scss file by the installation to a new file named _material_theme.scss inside the /styles directory and then include this newly created file in styles.scss.

Adding _material_theme.scss

Finally, we will create a “app-material-importer” module that will make it easy to include all necessary Angular Material components across modules —
ng g m app-material-importer

For every feature module that uses any of the Angular Material components, importing this module will serve as a single line import instead of importing all the Angular Material components separately in each of the feature modules.

We will place this file in the same level as app.module.ts and include it in app.module.ts as well.

Placing the material importer module parallel to the app module.

After adding the Material tabs, the common header will look like this —

Common header after adding the Material tabs

We will now work on customizing the Angular Material elements in the next steps.

Customizing the fonts

Even though the font specific changes were removed in the last step, the Angular Material elements will still have Roboto as the font.

Now, in the sample application as we were already using Roboto, it was not easy to detect the Roboto font being enforced in the Angular Material elements i.e. Tabs. For demonstration, I will change the font for the entire application to Courier New. We can still find the tabs using Roboto —

Angular Tabs having Roboto as the font even when the application font is different.

To force Angular Material to follow the application font families, we will have to add the following to our _material_theme.scss file —

After the above change, for our sample application, the tab will start having the application font —

Angular Tabs having the application font.

Customizing the color theme

As per the official theming guide, custom palettes need to be created for the application theme. Three palettes need to be defined —

  1. Primary — For our sample application, we will use the Material palette generator to generate the primary palette for the required hues. On entering the primary color code into the tool, gives us all the hues —
Hovering on the hue will give the hex code

Note: We will make an exception for the dark and light variants of the primary colors fixed earlier using the Material Color tool. We will use those hex codes in places of their closest color codes —

Material Color Tool

Hue 900 which had #33691e, will be replaced by #4b830d.
Hue 300 which had #aed581, will be replaced by #aee571.

2. Secondary — For our sample application, as we do not have a secondary color, we will be using the primary color hues for the same. This is what the Material guide has to say about secondary colors —

“Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

If you don’t have a secondary color, your primary color can also be used to accent elements.”

3. Warn — For our sample application, we will be using the default Material warn color (#B00020).

After the palettes have been defined, the next step will be to set the palettes to the theme. This will be done by adding the additional hues to the function as per the guide —

The define-palette Sass function accepts a color palette, described in the Palettes section above, as well as four optional hue numbers. These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue.

Customizing the Angular Material components

With the Angular Material configuration complete for the color and typography, the components will satisfy the basic functionality and Material design principles once included. However, there can be cases where more changes will be needed to suit the application UX.

For such tweaks, it is advisable to wrap the component in a custom class and then write the style rules in _global_styles.scss file. Additionally, for elements that are to be used over and over across the application, it can also be encapsulated inside a custom Angular component which will greatly reduce the complexity and redundant code in the parent component’s HTML and TypeScript files. These custom components will be included in a shared-utilities.module.ts which can then be important in all modules —

All custom components to be included in shared-utilities module

For example, in our sample application, we can tweak the following Angular Material components—

Tabs in primary navigation menu.

Before
After

Text form fields

Before
After

Next Steps

With Angular Material also included, we can now proceed with the last task of this guide—

Part 4 — Service/ API Integration

P.S. You can refer to my Git repo for all the code and the latest updates on the sample application.

Working Example

You can visit https://angular.owrrpon.dev/ for the working sample Angular application that follows the optimized codebase setup outlined in the above guide.

Front-end developer. Code commentator. Inventor of Modhyobitto Application Design (M.A.D.) principles.