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

Daniel Kreider

Jul 6, 2019·3 min read

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

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.

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.

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.

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.

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.