Reputation: 35
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?
Upvotes: 0
Views: 1042
Reputation: 202316
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.
Upvotes: 2