JSPM – angular2-mdl@0.0.9

Package Exports

angular2-mdl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular2-mdl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Status: Pre-Alpha! For production use wait unitl this package reaches version 1.1.3 (this will match the current material lite version!)

This package assumes that you are building an Angular2 app with TypeScript and Angular CLI!

Demo

Installation

npm install angular2-mdl --save

How to use the scss files from material-design-lite

First of all you need to install node-sass for your project:

npm install node-sass --save-dev

After that you need to configure the sass compiler to use the sass files from the angular2-mdl package. For that the file angular-cli-build.js needs to be extended:

return new Angular2App(defaults, {

    sassCompiler: {
      includePaths: [
        `${__dirname}/node_modules/angular2-mdl/src/scss-mdl`
      ]
    },
    vendorNpmFiles: [
      ...
      'angular2-mdl/**/*.+(js|js.map)'
    ]
  });

Now you can use the sass sources form angular-material-lite and change the used colors in your app:

@import "color-definitions";

$color-primary: $palette-blue-500 !default;
$color-primary-dark: $palette-blue-700 !default;
$color-accent: $palette-amber-A200 !default;
$color-primary-contrast: $color-dark-contrast !default;
$color-accent-contrast: $color-dark-contrast !default;

@import 'material-design-lite';