Adding Angular Material (ASP.Net Core - Angular 8.x)

Hi there! This post is part of a series where I am trying to build my own ASP.NET Core and Angular 8.x VS starter template, you may want to check out the rest if this interests you.

In this post I am going to cover installing and configuring Angular Material, basically I will be following the Getting Started guide linked earlier.

Let's dive in.

Step 1: Installing base packages

The first thing we are going to want to do, is to install Angular Material, Angular CDK and Angular Animations as per the guide, this is as simple as running the below command from the context of the ClientApp directory we created in the last post:

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

Once completed, the next step is to import either the BrowserAnimationsModule or the NoopAnimationsModule into the app.module.ts file.

@NgModule({
  imports: [
    // ...
    BrowserAnimationsModule
  ]
})
export class AppModule { }

You can refer to this commit to see the changes so far.

Step 2: the app-material module

As suggested in the guide I prefer to create a seperate app-material.module.ts file to import and export all the component models used in my projects. This makes managing the dependencies a lot easier.

I start off by creating a app-material.module.ts class file whose sole purpose is to import and export all the material components used in my project.

Once created I import the new module into app.module.ts.

Refer to this commit to see the modifications made in step 2.

Step 3: theming and gesture support

I tend to use plain CSS with my projects so installing a theme for Angular Material is a simple as choosing a pre built theme I want and adding it's import to the src/styles.css file:

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

After that I install HammerJS with the following command...

npm install --save hammerjs

... and import it into src/main.ts like so:

import 'hammerjs';

You can refer to this post to see the changes made so far.

Step 4: Icons and Fonts

The last step I normally take when setting up Angular Material is to import the Material Design Icons and set a default font for the application (normally Roboto).

Add the below imports to src/index.html to add the Material Design Icons and the Roboto font:

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

To make Roboto the default font add the below into the src/styles.css stylesheet:

html, body {
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

body {
    margin: 0;
}

You can refer to this commit to see the changes made for this step.

Step 5: Quick test

The last thing I would like to do before wrapping up this post is to add in a Home view with a material styled button to make sure that everything is working as expected.

I will start off by creating a new Home "view" under a views folder with the following command:

ng g c views/home --module=app.module

Next, I will add a default route in app-routing.module.ts for the new HomeComponent.

const routes: Routes = [
  { path: '', component: HomeComponent }
]

Then it's time to remove everything from app.component.html except for the router outlet.

<router-outlet></router-outlet>

I place an image button with a simple onclick event to make sure everything is working in home.component.html.

<h1 style="text-align: center">Home</h1>
<div style="text-align: center; padding: 5px;">
  <button mat-raised-button color="primary" onclick="alert('hi')">
    <mat-icon>favorite</mat-icon>
    Click Me!
  </button>
</div>

In order for the icon to work we will need to import the MatIconModule module into our app-material.module.ts file. While I was there I converted the imports into an array and used the javascript spread operator to reduce the number of lines.

You can see all the changes in this commit.

The only thing left to do is to test that everything is working as expected...

Success, Angular Material is working! Our template is starting to come together, albeit it is looking pretty bland at the moment. We will fix that in the next post.