Angular2 and ng2Material

Question

I'm trying to user ng2Material with Angular2, but I have a problem with the style on my code.

First : This plunker show the style as Material works (when you click over the button you see an animation over the button)

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    "ng2-material":"https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.8/ng2-material"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    'ng2-material': {
      defaultExtension: 'js'
    }
  }
});

Second : This is my plunker , and if you click over the button you won't see the animation.

System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {
          'app': {defaultExtension: 'ts'},
          'ng2-material': {defaultExtension: 'js'}
        },
        map: {"ng2-material":"https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material"}
      });
      System.import('app/main')
            .then(null, console.error.bind(console));

What could be the problem on the second example ?, Why it doesn't take the Material style?

Answer 1

It's because you don't set the Material directives ( MATERIAL_DIRECTIVES ) in your second plunkr on the InventoryApp component in its directives attribute.

import {MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES} from "ng2-material/all";

@Component({
  selector: 'my-app',
  providers: [],
  directives: [MATERIAL_DIRECTIVES] // <-----
  template: `
    <md-content>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <button md-raised-button class="md-raised">Button</button>
        <button md-raised-button class="md-raised md-primary">Primary</button>
        <div class="label">Raised</div>
      </section>
    </md-content>
  `
})
class InventoryApp{
  constructor(){

  }
}

Here is the updated plunkr (from the second you provided): https://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview .