I have encountered a minor issue while trying to incorporate material design into Angular2. I am using the latest version of Angular2, but the MDL framework seems to be incompatible.
Here is what I have done so far:
npm install material-design-lite --save
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<link rel="stylesheet" href="/app/themes/material.deep_purple-purple.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
In the MaterialDesignLiteUpgradeElement.ts file :
import {Directive, AfterViewInit} from '@angular/core';
declare var componentHandler: any;
@Directive({
selector: '[mdl]'
})
export class MdlUpgradeDirective implements AfterViewInit {
ngAfterViewInit() {
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}
And in the app.component.ts file :
import { Component, NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdlUpgradeDirective } from '../app/directives/MaterialDesignLiteUpgradeElement';
@NgModule({
imports: [ BrowserModule ],
declarations: [ MdlUpgradeDirective ],
bootstrap: [ AppComponent ]
})
@Component ({
selector: 'my-app',
templateUrl: '../app/app.component.html'
})
export class AppComponent {
}
package.json:
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
material-design-lite -version v1.2.1