Angular: Working with Google Material Design

Chris Mendez -

Here's how to install Angular Material into your Angular app.

Step 0 - Install Angular

Install Angular

Step 1 - Create an App

Create a new Angular app, change directory, and start the server in a single command.

ng new myapp && cd myapp && ng serve

Step 2 - Install Packages

Install Google Material Design.

sudo npm install --save @angular/material

When Angular hit version 4.0, the build team abstracted out a few extra packages, so we must manually install animations. Source

npm install --save @angular/animations

If you plan to work with mobile phones or multi-touch, you'll also want to add HammerJS while you're at it.

npm install --save hammerjs

Step 3 - Modify app.modules.ts

Some developers prefer to spell out which packages they want to use. If you're this type of developer, then read the section titled "Longhand." Otherwise, the "Shorthand" version example will work just fine.

Option 1 - Shorthand

Import the Google Material Design module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

// App specific modules
import { MaterialModule } from '@angular/material';

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

// Components
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: []
})
export class AppModule { }

Option 2 - Longhand

If you prefer to see how to only import the Material Design components you want, see this example.

Step 4 - Modify index.html

Open up src/index.html to include Material Icons.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular 2</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Paste this right here -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Step 5 - Modify styles.css

Open up /src/styles.css and add these Google Material font icons.

/* You can add global styles to this file, and also import other style files */
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

Step 6 - Create a component

For now, let's create a simple component for clients.

Create a component.

ng g component clients

Step 7 - Create a Service

Services are excellent for accessing data. Let's create a simple service to load in clients.

ng g service clients

Step 8 - Populate Data for Service

Let's first create some faker data that we'll later use to build a roster of clients.

Create Fake Company Name, Email, and Phone

Run this command 3x to populate our data.

curl http://faker.hook.io?property=internet.email&locale=us && 
curl http://faker.hook.io?property=company.companyName&locale=us && 
curl http://faker.hook.io?property=phone.phoneNumber

Step 9 - Modify the clients' service

We've created a service, and we've invented some data. Now we need to put the two pieces together. Open up app/clients.service.ts and paste this:

import { Injectable } from '@angular/core';

interface ICllient {
  name: string;
  email: string;
  phone: string;
}

@Injectable()
export class ClientsService {

  constructor() { }

  getClients(){
    let clients: ICllient[] = [
      {
        name: "Moore LLC",
        email: "Kaleb_Bernhard12@gmail.com",
        phone: "545.344.7324"
      },
      {
        email: "Zack_Treutel@gmail.com",
        phone: "979.155.7829",
        name: "Mills - Baumbach"
      },
      {
        phone: "(132) 452-7004",
        email: "Graciela83@yahoo.com",
        name: "King, Jacobs and Wisozk"
      }
    ]
    return clients;
  }
}

Resources