<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Material Angular 2</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!-- Load Bundle from Asset Host -->
<script src="https://plnkr-test.firebaseapp.com/components.bundle.js?sha=bf44c16"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<!-- Load the Angular Material 2 stylesheet -->
<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<material-app>Loading...</material-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/* Styles go here */
body {
margin:0;
background: #e8e8e8;
}
md-card {
margin: 8px;
}
button {
margin: 1em !important;
}
### Example for Angular Material 2
Angular Material 2 for http://adominguez.es/angular-material-2-guia-rapida
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
}
}
});
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'rxjs': 'vendor/rxjs',
'main': 'main.js',
// Angular specific mappings.
'@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
'@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
'@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
'@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
'@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
'@angular/material': {
format: 'cjs',
main: 'material.umd.js'
}
}
});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({
selector: 'material-app',
templateUrl: './app/app.component.html'
})
export class AppComponent {}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<app-toolbar></app-toolbar>
<app-card></app-card>
<md-toolbar color="primary">
{{title}}
</md-toolbar>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MaterialModule} from '@angular/material';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { MdtoolbarComponent } from './mdtoolbar/mdtoolbar.component';
import { cardComponent } from './card/card.component';
import { buttonComponent } from './buttons/button.component';
import { formComponent } from './form/form.component';
@NgModule({
declarations: [
MdtoolbarComponent,
cardComponent,
buttonComponent,
formComponent,
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule.forRoot()
],
bootstrap: [
AppComponent
],
providers: []
})
export class AppModule { }
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-toolbar',
templateUrl: './app/mdtoolbar/mdtoolbar.component.html'
})
export class MdtoolbarComponent implements OnInit {
title = "Angular Material 2 - Example"
}
<md-card>
<h2>{{title}}</h2>
<app-form></app-form>
<app-button></app-button>
</md-card>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './app/card/card.component.html'
})
export class cardComponent implements OnInit {
title = "Card example with button component"
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-button',
templateUrl: './app/buttons/button.component.html'
})
export class buttonComponent implements OnInit {
title = "Card example with button component"
}
<button md-raised-button color="primary">Button works</button>
<md-input placeholder="First name"></md-input>
<md-input #nickname placeholder="Nickname" maxlength="50">
<md-hint align="end">
{{nickname.characterCount}} / 50
</md-hint>
</md-input>
<md-input #email placeholder="email" type="email"></md-input>
<md-input type="password" placeholder="Password">
<span md-prefix>
<i class="material-icons app-input-icon">lock</i>
</span>
</md-input>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './app/form/form.component.html'
})
export class formComponent implements OnInit {
title = "Card example with button component"
}