How to include theming the angular 2 material in webpack app. (JHipster)?

2
votes

I am trying to import the angular material module into my app. I have done the next things: installed the angular material

yarn add @angular/material

included nesesary modules

@NgModule({
    imports: [
        DevizionSharedModule,
        BrowserAnimationsModule,
        MdCardModule,
        MdTabsModule,

Included teh defoult styles in my vendor.scss @import '~@angular/material/prebuilt-themes/indigo-pink.css';

But it does not seems to work, what am i missing?

2
webpackangular-material2

2 Answers

3
votes

  1. Add material and hammerjs
    yarn add @angular/material hammerjs (yarn install if required) Material should be: "@angular/material": "^2.0.0-beta.2" version

  2. Import material module and hammerjs in every entity module
    "import { MaterialModule } from '@angular/material'; import 'hammerjs';" Add material module in imports array

  3. Add the styles to vendor.scss. Add it before bootstrap
    @import 'node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.scss';
2
votes

import angular material module in your app.module.ts and add it in the imports metadata:

import { MaterialModule } from '@angular/material';

then add it to the imports metadata:

imports: [
  MaterialModule,
   .....
  ]

Also add this line in your global scss file :

@import '~@angular/material/core/theming/all-theme';
@include mat-core();

Also you may need to add this stylesheet in index.html to use the material icons in your app:

<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>