Tutorials on Material Design

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 Angular Material team has implemented an ng add schematic to automate the installation of the library and all the associated tasks. So you can just run this command: This performs the following actions: Each Angular Material component is exported as part of its own NgModule . To use a component, you must add the required NgModule to the imports array of the module you want to use it in. For example, if you wanted to use the Card component, you would import the MatCardModule as follows: Once you've imported the module, you can use the card component in your template. The MatCardModule also exports a number of directives that can be used to structure content within a card, such as MatCardTitle , MatCardContent and MatCardFooter among others. The general rules for instantiating Angular Material components and directives in your templates are: In addition to the ng add schematics for adding Angular Material to your project, there are also ng generate 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: The different available options are: 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 styles array in the build section for your project in angular.json . If you choose a custom theme, this path is not added. Instead, the global styles 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. To understand this better, let's look at it line by line. This imports the _theming.scss file from the Angular Material module. If we look at the build process for Angular Material, we can see that this file is generated by bundling together all the style files from various places in the codebase. Taking a closer look at theming-bundle.scss 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. The _theming.scss file provides two mixins - mat-core which includes all the non-theme-related styles, and angular-material-theme which includes all theme-related styles. The next line in our styles.scss file is: 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: 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 Material Design guidelines . 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: The color used for brightness level 500 is the default, so this palette is based on the color #3f51b5 . Lower numbers here indicate higher brightness and vice versa. The contrast 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: The next line in styles.scss defines our actual custom theme. There are two options available here - mat-light-theme and mat-dark-theme which influence the colors used for elements and backgrounds - mat-light-theme uses dark elements and light backgrounds, and mat-dark-theme uses light elements and dark backgrounds. The material design spec defines guidelines for fonts and typography . In Angular Material, these are implemented via CSS classes. There are classes such as mat-title , mat-display-1 , mat-display-2 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. You can add the class mat-typography to the body element in your index.html , 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. Here, we are overriding the font family and the config for the headline and body-1 styles via the mat-typography-level 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! 🚀 Angular Material's guides are a great place to get started learning various aspects of the library. It helps to look directly at the source code to understand how Angular Material works under the hood. This great tool built by Mikel Bitson generates Angular Material color palettes for any base color - super useful when you are creating a custom theme from scratch.