Getting Started with Angular Material

It’s obvious by today's standards that having a responsive, modern, intuitive and moreover human interface is required for any modern website, and i won’t convince you of how Material Design is mimicking that, because it’s quite obvious over Android, now in the web.

In this article, we’re about to talk about the following part:

1. Initializing an Angular Project using Angular-Cli.
2. Incorporating Angular Material.
3. Building cool shell application (Think of PWA 😉)

So, let’s get busy !

PS : find here the article Github Repo, i will make sure to update regularly with Angular Material Goodies !

houssem-yahiaoui/angular-material-starter

1 — Initialising an Angular Project :

In order to keep things simple, clean and organized we’ll use the Angular-Cli to achieve most of our creational operation, so we will use the cli to initialise the project, adding component and also deploying/testing about Shell Application.

If you don’t have it over your system make sure to install, simply copy/paste this command over your Terminal/CMD :

~> npm install -g @angular/cli

The command above will download and install the utility over your development machine, to test it, simply write down the following command:

~> ng help

Now, you’re well set to begin using the Angular-Cli utility, let’s initialize our project by writing the following command :

~> ng new <App-Name> #create a new folder and initialize the App.
~> cd <App-Name>
~> ng serve #launch the application.

2 — Let’s Add Angular Material :

To incorporate Material, let’s start by downloading it locally using the following command:

~> yarn add @angular/material @angular/cdk @angular/animations

In this command above, we’re downloading our dependencies using Yarn an awesome package manager for todays web scene, also we’re downloading the Angular Material, Angular Animation — Because most of the Material component need that sweet ripple animation — packages plus the Component Development Kit by Material as well.

Also for a better touch UX, we will install HammerJS as well.

~> yarn add hammerjs

Since Angular Material uses Animation, let’s configure that over our application.

Head to Application Folder ~> src ~> app ~> app.module.ts file, and add the following in your imports.

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

Then inside you “@NgModule” import section add the following so it becomes like this:

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

Or, if you prefer the Animation feature, simply import NoopAnimationsModule and replace the earlier imported module and you’re done.

Now, save everything and launch the application using ng server command in your terminal, and the result — If everything went okay — will look similar to this :

App component template.

3 — Let’s create the application shell !

Creating the application shell, means that we’re going to create the bare minimum in our application, from Navbar, Footer, basic Home page, so let’s begin !

A — Creating the Navbar component :

The Navigation Bar in Angular context will simply means that we’re going to create a new component, so let’s create one using Angular-Cli using the following command :

~> ng generate component navbar

The command above will end up doing the following :

1 — Creating the folder and basic templates for the navbar component (Style, Test,Templates, Class).

2 — Update the app.module.ts file with new declaration.

Let’s fix that template, with our Material Toolbar by doing the following :

1 — Over the app.module.ts file add the following import under the Component import :

import { MaterialModule } from '@angular/material';

Also, update your imports and include the ‘MaterialModule’ so you’ve a something that look’s like this:

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AppComponent } from ‘./app.component’;
import { NavbarComponent } from ‘./navbar/navbar.component’;
import { MaterialModule } from ‘@angular/material’;
@NgModule({
   declarations: [
     AppComponent,
     NavbarComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MaterialModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

PS: bare in mind that the code above will going to import all the Material Components, so you don’t need to import element by element in the future, this could be useful but all harmful later on, so be careful.

Now ! head to navbar.component.html file and replace the file content with the following:

<md-toolbar color="primary">
  <span>Angular Material Starter</span>
</md-toolbar>

PS: we’re applying some basic styling using the Material Theme.

Now, everything seems to be in place, Angular component are build and accumulated like Lego parts, that’s why we need to include our Navigation Bar component in our Application, more specifically over app.component.html file using two steps, those steps are fairly the same with each component we create.

Step 1 : Import the NavBarComponent in our AppComponent class, using the following simply import :

import { NavbarComponent } from ‘./navbar/navbar.component’

Step 2 : Add the NavBarComponent Selector before any content of the app.component.html file like the following :

<app-navbar></app-navbar> <!-- The NavBarComponent Selector -->
<div style=”text-align:center”>
   <h1>Welcome to {{title}}!!</h1>
   <img width=”300" src=”<img-src>”>
</div>

By now, thing looks great and if everything was okay for you and after successful completion you will have something that looks pretty much like this:

Result after adding the Navigation Bar

This is basically the start point of our application, and yeah there’s tons of stuff that we can add and enhance using nothing but Material from Cards, to Sidenav and more and everything is remarkably document over the official website and i will make sure to document more pieces of it in the next articles.

Makes sure to Like/Comment/Share, also to follow me over my social profiles, hoping to catch up in the next one !

Peace ⚡️

Houssem Yahiaoui ⚡️ (@_hcodex) | Twitter