Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save erycamel/0476d60163d152918b40741e5d5bfd23 to your computer and use it in GitHub Desktop.
Save erycamel/0476d60163d152918b40741e5d5bfd23 to your computer and use it in GitHub Desktop.
in your system-config.ts add the angular 2 vendor path to the map object:
const map: any = {
'@angular2-material': 'vendor/@angular2-material'
};
Then here's the tricky bit, the Packages object is empty const packages: any {}; (unless you have already installed some third party packages and added them, yours will be too). So we have to declare the material packages we want to use, we do this by creating a array of the package names
const materialPkgs[]: string[]= [
'core',
'button'
];
In this case I'm only importing button and core for simplicity's sake. Core must always be imported the other modules depend on it.
Next we loop through these materialPkgs and add them to packages using a forEach function
materialPkgs.forEach((pkg) =>{
packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}
});
we're almost done in system-config.ts, last thing we need to add the main vendor package to the map object of the system.config so it can be applied...
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'@angular2-material': 'vendor/@angular2-material'
},
packages: cliSystemConfigPackages
});
Your angular-cli-build.js file is fine, if you configured the default extension to be 'js' like i did, and probably you did too, you don't need to add it to the vendorNpmFiles. You could just as simply have '@angular2-material/**/*'
And we're done with the configuration.
import the directives in your component
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
add them to your directives array
directives: [ MD_BUTTON_DIRECTIVES ]
and use them in your markup
<h1>
{{title}}
</h1>
<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-fab>add</button>
<button md-mini-fab>add</button>
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
They should work.
Screenshot of app working:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment