Adding Angular Material to your Angular Project

So, you are developing a new project and have decided to use Angular as your front-end framework. You came across Angular Material and decided to use it as the component library for your new Angular project, but haven't tried it before. In this post, we'll discuss adding Angular Material to your new project. But first, we need to understand what Angular Material is, as a component library.

What is a component library? 🤔

A component library is a collection of UI elements, including buttons, fonts, visuals, and other design elements, compiled or stored in a single file or folder. It is also referred to as UI kit or UI library and is one of the building blocks of a design system.

As we develop our web applications, we aim to maintain a consistent design system for our front-end pages. What a component library is a collection of reusable user interface components, so that they can be used consistently across different projects.

Angular Material 📦

Angular material is google's official component library. It offers support for standard CSS and has simple APIs with consistent cross platform behavior. The component library also offers customizable components that are within compliance of material design specifications.

Adding Angular Material ➕

We will go through step-by-step process to ensure no detail is left out in this demonstration. Start by creating a new project with ng serve. You can choose to include Angular routing and then select SCSS as the style-sheet format.

ng new angular-material-demo

One thing to note is that we cannot simply choose any version of Angular Material to include in our new project. We must add the appropriate version that suits the Angular version installed on our machine. To determine the Angular version installed, run ng --version in your terminal.

The rule of thumb for selecting the Angular Material version to add to your project is that the version number must match the Angular version installed. For instance, if you have Angular version 7, you will need to install the 7.3.7 version of Angular Material. You can refer to this webpage to get the appropriate command to run in the terminal for the version you need.

We should also install the Angular Component Dev Kit (CDK) of the same version. Angular CDK (Component Dev Kit) is a set of tools and utilities that can be used to build complex and scalable web applications with Angular. Angular material needs cdk to work.

So pairing up my commands with installing angular material with installing angular cdk, i'll run this command on the terminal: npm i @angular/material@7.3.7 && npm i @angular/cdk@7.3.7.

After running the command for adding Angular Material (npm i <angular-material-version>), you should be able to observe changes in your project's package-lock.json and package.json files.

You can run ng serve to test out if it works 😉.

Using Angular Material Components ✨

You can refer to the Angular Material web documentation. On the webpage, you can also select the Angular Material version on the top-right side of the navigation bar.

We will use Material toolbar, input, and button components here as simple example. Go to your code editor, ensure your terminal is focused on your project directory, then run ng generate module material.

We will create a module here for importing the components from angular material. This is a more cleaner way than to just put all import declarations on app.module.ts.

On material.module.ts, delete the code on line # 2 that imports CommonModule and replace it with:

import { 
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
 } from '@angular/material';

This imports the toolbar, button and input modules from angular material. We will now create an array and name it material, we will use this array as placeholder for UI components that we want to initialize.

const material = [
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
];

And then replace the contents of @NgModule's export and import with reference to material. The final result of your material.module.ts should look like this 👇.

import { NgModule } from '@angular/core';

import { 
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
 } from '@angular/material';

const material = [
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
];

@NgModule({
  exports: [material],
  imports: [material]
})
export class MaterialModule { }

Now go to app.module.ts file of the project and import MaterialModule and BrowserAnimationsModule.

import {MaterialModule} from './material/material.module'
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'

And then add it to the imports array inside the @NgModule. The contents of @NgModule should appear as follows.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,      // add material module and browser animations module to imports array ✨
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Add this line of code, @import '@angular/material/prebuilt-themes/deeppurple-amber.css';, to your project's styles.css file. This is a pre-built theme from Angular Material.

And finally, in the project's app.component.html, replace the blocks of code above <router-outlet> with this code.

<mat-toolbar>
  <span>Angular Material Demo</span>
</mat-toolbar>

<div>
  <mat-label>Name:</mat-label>
  <mat-form-field><input matInput></mat-form-field>
</div>

<div>
  <mat-label>Age:</mat-label>
  <mat-form-field><input matInput type="number"></mat-form-field>
</div>

<div>
  <mat-label>Address:</mat-label>
  <mat-form-field><input matInput></mat-form-field>
</div>

<button mat-raised-button color="primary">Submit</button>

After executing ng serve on your terminal, the final output should resemble the following.

To use the other components of Angular Material, refer to the official web documentation here. The documentation offers examples of how to use the various UI components in their library. Additionally, you can check out this YouTube playlist tutorial from Codevolution on Angular Material. I personally recommend their tutorial playlist because they explain how to use the Angular Material components in an easy-to-understand manner.