Sharing Top Content from the Angular-sphere.

Getting Started With Angular Material 2 ← Alligator.io

  • Angular Material 2 brings Material Design components to Angular 2+ apps.
  • The latest release of Angular Material depends on Angular 4+ – – 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…
  • 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 them to your project, you can add this to the head section of your project’s root index.html file: – – 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 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 therefore been deprecated in favor of defining a project-specific custom material module where you import and export only the needed components. Here’s what our module can look like:

Getting Started With Angular Material 2 ← Alligator.io