Looking to integrate Google's Material Design in your Angular 4+ app? Look no further! I created a tutorial a few months ago based on this very subject, except it was for Angular 2. Now, we need to revisit this topic because a few things have changed and that tutorial is now outdated.

First, if you prefer watching a video instead Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome design and development videos.

Generating a Project I like to start from scratch with these tutorials. So, I'm going to use the Angular CLI to generate a new project. If you're new to Angular and the CLI, check out our Free Angular Course (version 4). Hop into the command line: > ng new ng4-material Once finished: > cd ng4-material

Installing Dependencies We're going to take care of installing all of the necessary dependencies in one command. I'll explain beneath: > npm install --save @angular/material @angular/animations So, we have 2 packages being installed here. @angular/material

This is the official Material package for Angular.





This is the official Material package for Angular.

@angular/animations

New to version 4 is the necessity of installing animations separately from the angular core library. Certain Material components need access to the animations library, which is why we're installing it here. Let's also run and watch our app: > ng serve Open our the /src/app/app.module.ts file and import the packages that we just installed: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule } from '@angular/material'; Okay, so a lot is happening here. First, we're importing the animations package. The next import is what's unique to Angular 4 Material. Before, we just included a single MaterialModule. Now, we have to import each component that we intend to use. As you can see, I've added 6 different modules here for material buttons, cards, menus, toolbars and icons. Now, let's add each of these as imports in the @NgModule: @NgModule({ // Other properties removed from brevity imports: [ BrowserModule, FormsModule, HttpModule, BrowserAnimationsModule, MdButtonModule, MdMenuModule, MdCardModule, MdToolbarModule, MdIconModule ], }) Go ahead and save this file. You might be wondering though, how did I know the names of the modules to import? Well, I read the official angular material documentation of course! If you click on any of the components on the left menu, and then click on the API REFERENCE tab, it provides you with the exact import line that you need to use. In terms of setup, that's all that we need to do to before we actually begin using and integrating material components into our templates. You just have to remember to import each unique component that you plan on using. While this tutorial will not go in-depth in terms of covering Material components, we will setup a real quick example just so you can get your feet wet.

Some quick work in the component We're going to use JSONPlaceholder to feed us some dummy JSON data for our app. This site provides you with a public API to help test and build your app. To access the API, we have to import the Http library in our /src/app/app.component.ts: import { Component } from '@angular/core'; import { Http } from '@angular/http'; Then, in the AppComponent class, let's add: export class AppComponent { myData: Array<any>; constructor(private http:Http) { this.http.get('https://jsonplaceholder.typicode.com/photos') .map(response => response.json()) .subscribe(res => this.myData = res); } } We're defining a property myData as an array, and then in the constructor we're creating an http instance through dependency injection. Then, we're using that instance to grab JSON from the JSONPlaceholder API. Save the file.

Defining a Default Material Style In our /src/styles.css file, which is generated by the Angular CLI, let's add the following: @import '~@angular/material/prebuilt-themes/indigo-pink.css'; body { padding: 2em 23em; background:lightgray; } Based on your preferences, you can change indigo-pink.css to: deeppurple-amber.css

indigo-pink.css

pink-bluegrey.css

purple-green.css I'm also adding some CSS to the body tag only for demonstrating this layout. This helps it look more like an app, even on a desktop. Let's also add 2 lines to our /src/index.html file just before the closing </head> tag: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> This is importing the material design icon font, and also the Roboto font, which is used by Material design.

Defining a Template In /src/app/app.component.html let's start off by adding a toolbar through md-toolbar: <md-toolbar color="primary"> <span>MyCompany</span> <span class="example-spacer"></span> <button md-button [mdMenuTriggerFor]="appMenu"><md-icon>menu</md-icon> Menu</button> </md-toolbar> <md-menu #appMenu="mdMenu"> <button md-menu-item> Settings </button> <button md-menu-item> Help </button> </md-menu> This is what your app should look like in the browser: And when you click on the menu button: Underneath the menu, let's use *ngFor to display some of the photos we're pulling from the API, in card-format: <md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,10): []); let i = index"> <img md-card-image src="{{ data.url }}"> <md-card-header> <md-card-title>{{ data.title }}</md-card-title> </md-card-header> <md-card-actions> <button md-button>LIKE</button> <button md-button>SHARE</button> </md-card-actions> </md-card> We're using *ngFor along with a .slice function to only return 10 results; otherwise, we will get over 5,000. We're also defining a local variable of i for the index, in case you want to do something specific with the result, such as making the like or share buttons function. We won't be doing that though, because that extends beyond the scope and purpose of this tutorial. Now, your app should look like this: