Getting Started Using Angular Material 2 in an Angular 2 Angular-CLI application

Update: This article is out of date. I recently wrote about Angular Material2 as the library has been updated. Check out the series here.

So, I’ve committed to giving a few talks this month about creating Angular 2 apps using Angular CLI and Angular Material 2.

It’s been fun playing with alpha and beta software, I must say.

Figured I should blog about a few of these things because it will help beginners like me. :P

Ready to get bae?

Installing Angular-CLI

Literally by just typing this on the command line.

npm install -g angular-cli

Well, do that first by visiting here: https://github.com/angular/angular-cli#installation

Creating your first app with Angular-CLI

Now for the life changing moments brought to you by the Angular-CLI team enabled by the Ember-CLI magic.

I’m going to create an app called ng-tattoo-demo for fun.

  1. Create your new app using ‘ng new’ command which scaffolds up a new app for you.
$ ng new ng-tattoo-demo

2. cd into your new app.

$ cd ng-tattoo-demo

3. Serve up that deliciousness.

$ ng serve

After running ‘ng serve’, you should be able to go to localhost:4200 and see your app running. If this is successful, you should see ‘app works’. Kind of like this.

This is what you should see after ng serve if you’ve done it correctly.

Installing Angular Material 2

Now for the excitement of Angular Material 2! Ready?

Let’s get a button working first then we’ll worry about the rest. Because the Angular team would like your app to be as lightweight as possible, you’ll need to install each material component individually. I’m hoping for a bundle install soon! :P

  1. First, kill your server (CTRL-C)
  2. npm install angular2 material core
npm install - —save @angular2-material/core

3. npm install angular2 material button

npm install — save @angular2-material/button

4. Start your server using ‘ng serve’

Now, we’re going to make sure everything is wired up properly. The files we will be looking in are the angular-cli-build.js file and the system-config.ts file.

Configuring your angular-cli-build.js file

Add ‘@angular2-material/**/*’ to your vendorNpmFiles array. Screenshot below and highlight for reference.

Configuring your system-config.ts file

Add these lines of code to your system-config.ts file. Screenshot and code below so you get the idea, but more importantly, a gist so you can copy pasta into your code.

/** Map relative paths to URLs. */
const map: any = {
@angular2-material’: ‘vendor/@angular2-material’
};
/** User packages configuration. */
const materialPackages:string[] = [
‘core’,
‘button’
];
const packages:any = createCustomConfig(materialPackages);
function createCustomConfig(packages: string[]): any {
return packages.reduce((packageConfig: any, packageName: string) => {
packageConfig[`@angular2-material/${packageName}`] = {
format: ‘cjs’,
defaultExtension: ‘js’,
main: packageName
};
return packageConfig;
}, {});
};

Getting the material button to work in your app.component.ts file

We’re almost there!

I like to add an in-line template first so that I can immediately see the result of the material button and know that I have everything installed properly.

Add the template first into your app.component.ts file as show below.

template: `
<button md-raised-button color=’primary’>this is a magical button</button>
`

Once you’ve done this, you should see a generic button on your localhost as shown below.

Now, we’re going to get import the material button that we installed and magic is going to happen!

Import the button

import { MD_BUTTON_DIRECTIVES } from ‘@angular2-material/button’;

Then add the directive

directives: [MD_BUTTON_DIRECTIVES]

Kill and restart your server

Now, you’ve made a few changes and you need to kill and restart your server. Once you do, if you refresh your localhost:4200, you should see this! And that is how you know it works. Created a gist for the app.component.ts file so you know what’s up.

What Angular Material 2 components exist today?

Hey that’s a great question! The team has not yet released the beautiful docs site yet, but if you pull down the repo from github and ng serve, you’ll see the docs site behind closed doors. It’s pretty gorg.

I looked in the /src/components folder and there you can find all the components listed out. There are individual README files if you visit each individual component, but it’s not the best documentation yet.

Getting md-icons to work

For most of these items, following the npm install instructions is good enough, but I found it a little harder getting md-icons set up, mainly because there are a few more steps. So, here’s how I did it.

First off, make sure your server is not started, then npm install.

$ npm install @angular2-material/icon
$ npm install @angular/http

To get icons to work, you’re going to need to configure your index.html file, your main.ts file, and your app.component.ts file.

Configuring your index.html file

In your index.html, add the link. Here’s a gist of what your index.html should look like.

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>

Configuring your main.ts file

import { HTTP_PROVIDERS } from ‘@angular/http’;

Then add this:

bootstrap(AppComponent, [
HTTP_PROVIDERS
]);

Configuring your system-config.ts file

Make sure to add ‘icon’ to your array!

Configuring your app.component.ts file

Go ahead and add a button with using md-icon to your template so we can make sure it works. For purposes of this example, I just added a bit of styling so the buttons don’t mush together and you can see the example more clearly.

<button md-raised-button color=’primary’><md-icon>home</md-icon></button>

What should actually output after you add the button is a button that says home on it. This is because the we haven’t imported the icons yet to use in our app component.

Next, we’ve got to get the home text to change into the home icon. After we get this to work, we’ll know we can use md-icons in our app without a problem.

Here’s how we get md-icon to start working.

import { MdIcon, MdIconRegistry } from ‘@angular2-material/icon’;

Add MdIcon to your directives array and create a providers array and add MdIconRegistry. Shown below.

After you’re done with all that jazz, the ‘home’ text should change into a little house. Did it work for you? :D

So, now you know how to install and use Angular Material 2 in your app. You should look at the github repo and the READMEs for each app.

This is part 1 of a series I’m doing! Part 2 is here: Setting Up and Testing Angular Material 2 Components in your Angular 2 Angular-CLI Application

PS, if this seems too hard and using alpha software doesn’t sound amazing to you, here are the instructions to use MaterializeCSS in an Angular 2 app instead.

You can also follow me on the internet @ladyleet. I’d love to hear what you thought of this! :)

PPS I do this thing called Modern Web. We host online events, conferences, trainings, and have an awesome podcast. You can find out more at http://modern-web.org.

Tips & References

As you are editing and adding things into your code, you should be constantly referring back to your localhost so that you can make sure when the build breaks you know *why* and when it broke. Lol. :)

If things are not working, try killing your server and restarting it. Honestly, sometimes this fixes things immediately. Because, magic.

Angular Material 2 Source Code https://github.com/angular/material2

Getting started guide for Angular Material 2 https://github.com/angular/material2/blob/master/GETTING_STARTED.md