5 minute guide to build an Angular app with Material… in 2019

Nathan K

Say, why do some people think Angular is a deep, dark, complicated framework? And that it is hard to use?

In this guide, we’ll take 5 minutes to show that Angular is a simple framework that anyone can get started with.

I’ll begin by assuming that you’ve already installed Node.js.

Step 1: Install the Angular CLI.

sudo npm install -g @angular/cli
Installing Angular CLI

Step 2: Create initial application

ng new hello-world

You’ll be asked if you want to add Angular routing. Select No.

You’ll also be asked what type of stylesheet format you want to use. Select the default by typing Enter.

Creating Angular application with CLI

Step 3: Serve the Angular App

Now that the Angular CLI has created your Angular application run the following commands.

cd hello-worldng serve --open

This process will build and launch the application. If successful, your browser should open a page like this.

Angular “Hello World” application

Now that we’ve got our Angular application launched and running, the next step is to install Angular Material.

Open a terminal inside of your Angular applications root directory and run the following command.

ng add @angular/material

You’ll be asked to choose a theme of your choice. Select any theme that you like with your arrow keys and then hit Enter.

Next you’ll be asked if you want to set up HammerJS for gesture recognition. Select Yes.

And finally, you’ll be asked if you want to set up browser animations for Angular Material. Select Yes.

The Material components are now installed and ready to use.

Install Angular Material with Angular CLI

If your application is running it should automatically reload. You’ll notice that the font has changed.

Now that you’ve installed Angular Material let’s add a Toolbar to our application.

Open your new Angular project in your favorite code editor. (I use Visual Studio Code.)

Step 1: Import Toolbar Module

We’ll begin by opening the file located at src\app\app.module.ts and at the top of the file we’ll add the following line of code to import the MatToolbarModule .

import { MatToolbarModule } from '@angular/material/toolbar

And then add it to our imports array.

imports: [   BrowserModule,   BrowserAnimationsModule,   MatToolbarModule]

Step 2. Edit app.componenent.html

Next we’ll want to replace all the boiler-plate code from src\app\app.component.html with the snippet below.

<mat-toolbar>   <span>Hello World</span></mat-toolbar>

Your application should now look like this.

Angular “Hello World” with Material Toolbar

Well… ya done done it!

Now you know how to create an Angular application, install Angular Material and use a basic Material component.

Please click that 👏 button. Thank-you.

Follow me on Medium for articles about Angular and feel free to check out some other short, helpful posts.

Nathan K

Written by

Nathan K

JavaScript developer. TypeScript lover. Writing code since 16. Working professionally since 18. Part-time freelancer. And you?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade