Menu

Getting Started With Angular Material 2 ← Alligator.io

November 3rd, 2017

Getting Started With Angular Material 2 by @alligatorio  #angularjs #javascript #coding

  • Angular Material 2 brings Material Design components to Angular 2+ apps.
  • Here’s how to get started with Angular Material 2: – – First install Angular Material, Angular animations, and Hammer.js in your project with these commands: – – Hammer.js is an optional dependency and helps with touch support for a few of the components.
  • Prior to Angular Material 2 Beta 3, there was a global MaterialModule that could be imported in the app module to make the components available.
  • Your app module (e.g.: app.module.ts) will look a little bit like this: – – There are a few pre-built themes installed automatically with Angular Material.
  • To import both a theme and the Material Design icons to your project, you would add this to your global styles.css: – – It’s now ready for you to start using the available Angular Material components in your templates.

The simple steps to setup Material Design components in your Angular 2+ apps.

Angular Material 2 brings Material Design components to Angular 2+ apps. The goal of the project is to build a full array of components to make it very easy to built Material Design interfaces for mobile and desktop.

The project recently reached its 12th beta release and is in heavy development. That means that things may change rapidly. This post will be updated to reflect changes.

The latest release of Angular Material depends on Angular 4.

Here’s how to get started with Angular Material 2:

1. npm install angular-material & hammerjs

First install Angular Material, Angular animations, and Hammer.js in your project with these commands:

Hammer.js is an optional dependency and helps with touch support for a few of the components.

2. angular-cli.json

If you decide to use Hammer.js, and given that you’ve started your project with the Angular CLI, modify your angular-cli.json file to add the Hammer.js library. Look for the Json “scripts” array and add the following path for hammer.js:

You may need to restart your local server for the changes to angular-cli.json to take effect.

3. Custom Material Module

Prior to Angular Material 2 Beta 3, there was a global MaterialModule that could be imported in the app module to make the components available. The downside to that is that tree-shaking is not efficient enough to remove all the unused code.

MaterialModule has…

Getting Started With Angular Material 2 ← Alligator.io