Optimized Angular Material Setup
Part three of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.
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 —
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 —
We will remove the below highlighted changes made to styles.scss —
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.
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.
After adding the Material tabs, the common header will look like this —
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 —
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 —
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 —
- 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 —
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 —
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-paletteSass 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 —
For example, in our sample application, we can tweak the following Angular Material components—
Tabs in primary navigation menu.
Text form fields
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.
