Chris Mendez in For Developers, Angular, Firebase

Angular: Working with Google Material Design

The current nomenclature is to say stop announcing "Angular 2" or "Angular 4" and instead just say "Angular". Therefore, here is 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 exactly 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 just create a simple component for clients.

Create a component.

ng g component clients  

Step 7 - Create a Service

Services are great for accessing data. Let's just 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 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