4

Hello I am using JHipster 4.0.1

I want integrate angular 2 material into my home.component.

I did : npm install material npm install angular2/{core,button}

 <html><head></head>
<body> 
<md-button>Hello </md-button></body></html>

the error is : md-button is not a known element

Gaël Marziou
  • 16,028
  • 4
  • 38
  • 49
Chebbi Ala Eddine
  • 175
  • 1
  • 2
  • 13

1 Answers1

9

For those using yarn rather than npm:

yarn add --exact @angular/material
yarn start

Import angular material module into src/main/webapp/app/shared/shared-libs.module.ts:

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

@NgModule({
    imports: [
        MaterialModule,
        ...        ],
    exports: [
        MaterialModule,
        ...

Add a theme into src/main/webapp/content/css/vendor.css:

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

Add some MD elements to src/main/webapp/app/home.component.html:

    <md-card>
        <button md-button class="mat-primary">Hello </button>
    </md-card>
Deepu
  • 1,241
  • 1
  • 11
  • 24
Gaël Marziou
  • 16,028
  • 4
  • 38
  • 49
  • 1
    md-card works but when i put md-button or other element it doesn't work!! – Chebbi Ala Eddine Feb 13 '17 at 08:37
  • all directives working only doesn't work – Chebbi Ala Eddine Feb 13 '17 at 10:03
  • 1
    Did you notice that I used – Gaël Marziou Feb 13 '17 at 10:13
  • yes but as i am Beginner in material design i want to know why doesn't work . i am sorry . – Chebbi Ala Eddine Feb 13 '17 at 10:18
  • Because it is not supposed to be used like that, check the docs, it's an attribute not an element: https://material.angular.io/components/component/button. I helped you and you did not accept my answer, this is not how stackoverflow works – Gaël Marziou Feb 13 '17 at 10:20
  • 1
    @GaëlMarziou Keep in mind that just because StackOverflow allows you to submit questions doesn't always mean that the user has to accept that answer regardless of whether you think it's correct or not. Telling OP that "this is not how stackoverflow works" isn't the recommended way of handling it. Just my two cents. – gotnull Mar 01 '17 at 02:24
  • @fuzz so what is your recommended way without knowing the context? – Gaël Marziou Mar 01 '17 at 16:59