Angular Material Getting Started

In this tutorial we gonna look at; How to setup Angular Material, include a default theme and build a simple application with sidebar navigation.

So basically build a toolbar, and few input elements like input text, checkbox’s, etc

So, let’s get started.

So first thing first, check if you got angular CLI installed in your PC.

Ng version will reveal that;

$ ng version

If not, just install them using NPM.

$ npm install -g @angular/cli

Let’s create our application, that is;

$ ng new AngularMaterialStart

Once the setup is done, time to install angular material;

So, install Angular Material, Angular CDK and Angular Animations

$ npm install --save @angular/material @angular/cdk @angular/animations

Open up our source in VSCode and add few things;

Take a quick look at our app.module.ts to see if there is anything changed in terms of Angular Material. So far nothing has been altered.

Enabling and Disabling Animations module for our Application

We already installed animations package using @angular/animations and it is ready for import.

Let’s go to app.module.ts

In app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Alternatively, you can disable animations by importing NoopAnimationsModule.

Everything is almost set, now let’s start our application to see how it looks.

$ ng serve

And there is nothing, so let’s add some component modules from angular material.
https://material.angular.io/components/categories

Let’s go check out the documentation for angular material components.

Angular material offers pretty much everything that is needed to build a complete web app from scratch.

You can build anything, imagination is your limit, customize it greatly and theme your app to your needs.

The documentation is divided in to 6 sections;
Starting from “Form Controls” where we will deal with input elements such as input, checkbox’s and even sliders and slide toggles.

All the way to layouts, navigation, data table and menus.

Create a new file called material.module.ts

I am gonna have a toolbar, so let’s look at the document and see how I can include toolbar in my application.

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

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

 

I am gonna have a toolbar, so let’s look at the document and see how I can include toolbar in my application.

Finally add MaterialModule in app.module.ts

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule
  ],

Now, everything works, there is no error in our browser console. But the look and feel is not quite expected. We forgot to add a theme for our material design.

Including a theme

For now, we can include a default theme that is;

import "~@angular/material/prebuilt-themes/indigo-pink.css";

Let’s head over to style.scss and add this statement.

There you go, got the look and feel for our app.

The toolbar is plain and simple, I am gonna add a hamburger menu icon.
There is an example on how to include an icon in the documentation.

 

Adding Material Icons

And to get the Material Icons loaded, add the icon link to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Style our menu icon.

<mat-icon 
    id="toolbarMenu"
    (click)="onToolbarMenuToggle()"
  >menu</mat-icon>

Go to Style.scss

body {
    padding: 0;
    margin: 0;
}

#toolbarMenu {
    margin-right: 20px;
    cursor: pointer;
}

Let’s take one step further and add a sidenav to our app.

Sidenav contains two sets of compoments that are designed to add collapsible side content and a primary content.

To setup sidenav, we use three components:

<mat-sidenav-container> - which is a main structural container for drawer and primary content.
<mat -sidenav-content>  - which represents the main content.
<mat-sidenav>           - which represents a drawer navigation.

 

In material.module.ts

Add MatSideNavModule, to get the sidenav working

import { 
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule
} from '@angular/material';

@NgModule({
    imports: [
        MatToolbarModule,
        MatIconModule,
        MatSidenavModule
    ],
    exports: [
        MatToolbarModule,
        MatIconModule,
        MatSidenavModule
    ],
})

<mat-sidenav>    - which represents a drawer navigation.

Go to app.component.html

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

I am gonna define a template variable for our sidenav called as #sidenav.

And attach that to our menu button.

So.

<mat-toolbar color="primary">
  <mat-icon 
    id="toolbarMenu"
    (click)="sidenav.toggle()"
  >menu</mat-icon>
  My Awesome App
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav 
    #sidenav
    mode="side" 
    opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

Sidenav api has few input and output evens, we can make use of those events if we are building a complex application.

For now, let’s look at couple of options such as, (opened) and (closed).

<mat-sidenav 
    #sidenav
    mode="side" 
    (opened)="sidenavEvents('opened')"
    (closed)="sidenavEvents('closed')"
    opened>Sidenav content</mat-sidenav>

 

Making the sidenav container to full height

The sidenav is just placed without extending vertically, so we need to make it a full screen and it should not hide our toolbar.

So let’s begin.

In our app.component.html

<mat-sidenav-container id="sidenavContainer" fullscreen>

And in our style.scss,

#sidenavContainer {
    margin-top: 64px;
}

Since our toolbar is of height 64px, so we push the sidenav down to 64px.

In conclusion, this is all we need to get started with Angular Material Design.