generator-jhipster-angular-material-integration

generator-jhipster-angular-material-integration

JHipster module, Module for installing the dependencies needed to use Angular Material in a Jhipster project.

Introduction

This is a JHipster module, that is meant to be used in a JHipster application.

This generator allows you to set up and download the dependencies necessary to use Angular Material.

You can find a sample application using this generator here.

Prerequisites

As this is a JHipster module, we expect you have JHipster and its related tools already installed:

• Installing JHipster

Installation

With Yarn

To install this module:

yarn global add generator-jhipster-angular-material-integration

To update this module:

yarn global upgrade generator-jhipster-angular-material-integration

With NPM

To install this module:

npm install -g generator-jhipster-angular-material-integration

To update this module:

npm update -g generator-jhipster-angular-material-integration

Usage

First, you have to run the generator using the following command :

yo jhipster-angular-material-integration

Please check that @angular/animations, @angular/cdk, @angular/flex-layout, @angular/material and hammerjs has been added to your package.json. If not, please add it yourself with version "latest" (example: "@angular/animations": "latest") and execute npm install. Now you have all the necessary elements to use Angular Material's tools : Angular Material Website.

# How

This generator will first add a jh-material.module.ts file, which imports all material component, in Shared folder. This module will then be imported in shared.module.ts :

import {JhMaterialModule} from \'app/shared/jh-material.module\';

BrowserAnimationsModule and hammerjs (which is not necesary but useful for some components) are imported in app.module.ts file :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';

Then, it imports a css-theme in your vendor.scss.

Finally, it adds hammerjs, @angular/material, @angular/flex-layout, @angular/cdk and @angular/animations to your package.json and launch an install.

License

MIT © Contribution Jhipster UGA Julien Courtial, Hugo Gros-Daillon, Cédric Lafrasse, Bastien Terrier

This generator has been inspired by the tutorial of Cyril Casaucau.