Angular Material 2 – Using in Angular 2 apps with Angular CLI

Angular Material 2 comprehensive, modern UI components that work across web, mobile and desktop. They are built on Material Design concepts. They are built with Angular 2 team.

One important point to notice even though its built by Angular 2 team, it’s not part of packages required for building Angular 2 i.e. its treated as 3rd party package to be integrated. Recommend to go through Github repo

For styling  Angular 2 apps, we can use Bootstrap, Semantic UI, its not mandatory to use material design.  Angular Material 2 components have more features apart from styling.

We will be adding these Material 2 components into Angular 2 application created using Angular CLI, we will continue from Build Angular 2 apps using CLI

Remember Angular CLI is not the only way to create Angular 2 apps & add Material 2 components

Update package.json to Angular Material 2 package

From the project root directory (same directory as package.json), run the following command to install Material 2 packages as well update package.json

Adding hammer.js to package.json

The slide-toggle and slider components have a dependency on HammerJS. You need to run this to ensure everything builds properly.

HammerJS support touch gestures to web pages

Using Material Icons and per-built theme

If you are interested in adding Material icons using md-icon in html pages, we need to include link them. Angular CLI uses Webpack to build, compose run application, it becomes much easier to add it.

Angular Material comes with per-built theme when installing packages, this can be added too. Both md-icon and pre-built theme are optional

Open src/styles.css, then add the following code in this file

Include Material Module

Angular 2 uses @NgModule for declaring components, importing modules, services as providers etc. We need to import material module to be used across the application. Refactoring to Material Module is good approach compared previous approach.

Add highlighted code into src/app/app.module.ts. This will import material components using webpack

Material components in HTML

Open src/app/app.component.html, add following code – we are using md-toolbar, md-grid-list, md-grid-tile to show planets as tiles.

Then open src/app/app.component.ts, it just loads planetslist, assign new planet member, showPlanetInfo method just assign selected planet to be shown on UI.

Clicking on the info icon, it will show planet details in bottom

Now that we have adding Material 2 package, imported them, included them in HTML, lets do ng serve to see them on web page as seen below

angular material 2

Our planets showing Material components

It’s very easy now to include Angular Material 2 components in Angular 2 application.

You may also like...

8 Responses

  1. Thanks for great article. I only would like to mention that when switching from css to sass I had to import Material Icons using @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); without url() I had error when trying to serve and build by app.

  2. gabi alvarez says:

    Good article. I got some problems including css because of the new version of Angular cli. The best solution if you get a 404 is configure the new angular-cli.json
    (…)
    “styles”: [
    “styles.css”,
    “../node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css”
    ],
    (..)

  3. Josh says:

    I would love to see a worked out example of a responsive navigation menu using Angular Material Design 2

  1. September 30, 2016

    […] Angular Material 2 much easier now Angular […]

  2. October 2, 2016

    […] Angular Material 2 – Using in Angular 2 apps with Angular CLI. Angular Material 2 comprehensive, modern UI components that work across web, mobile and desktop. They are built on Material Design concepts. They are built with Angular 2 team. One important point to notice even though its built by Angular 2 team, it’s not part of packages required for building Angular 2 i.e. its treated as 3rd party package to be integrated. Recommend to go through Github repo For styling Angular 2 apps, we can use Bootstrap, Semantic UI, its not mandatory to use material design. We will be adding these Material 2 components into Angular 2 application created using Angular CLI, we will continue from Build Angular 2 apps using CLI Remember Angular CLI is not the only way to create Angular 2 apps & add Material 2 components Update package.json to Angular Material 2 package From the project root directory (same directory as package.json), run the following command to install Material 2 packages as well update package.json Install Angular Material 2 package. […]

  3. March 5, 2017

Leave a Reply