<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Material Plunker</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 rel="stylesheet" href="style.css">
</head>
<body>
<switch-app>Pizza is on the way...</switch-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
-->
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
interface Turtle {
name: string,
thumb: string,
link: string,
description: string
}
@Component({
selector: 'switch-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
currentView: string;
turtles: Turtle[] = [
{name: 'Michelangelo', link: 'http://www.nick.com/ninja-turtles/michelangelo', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/michelangelo.jpg', description: "Mikey is the class clown of the Ninja Turtle’s sewer lair, constantly pranking his brothers and concocting some seriously sick food (pizza milkshake, anyone?). When he’s not dancing to his fave tunes or downing a whole pepperoni pie, Mikey is kicking some major Kraang butt with his brothers."},
{name: 'Donatello', link: 'http://www.nick.com/ninja-turtles/donatello/', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/donatello.jpg', description: "From insane weapons to some awesome vehicles, Donnie has invented some epic gadgets to help keep the Ninja Turtles safe. His talents include hacking computer systems and cracking security codes. He just can’t seem to figure out how to steal April’s heart..."},
{name: 'Leonardo', link: 'http://www.nick.com/ninja-turtles/leonardo/', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/leonardo.jpg', description: "Leo eats, sleeps and breathes ninjutsu, which is probably why he was chosen by Master Splinter to be the leader of the Ninja Turtles. Keeping his rowdy brothers in line can be hard, but Leo never lets anything get in the way of their strong teamwork when it comes to defeating villains."},
{name: 'Raphael', link: 'http://www.nick.com/ninja-turtles/raphael/', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/raphael.jpg', description: "Raph is always the first to a fight, and never forgets to brings his tough attitude and hot-headed temper. Though he’s sometimes hard on his brothers, Raph shows his softer side when he’s with his pet turtle, Spike. Oh, and he’s also afraid of cockroaches… but don’t tell him we told you!"}
];
setCurrentView(view) {
this.currentView = view;
}
}
<md-toolbar class="md-elevation-z3">
The Turtles
<span class="toolbar-spacer"></span>
<button (click)="setCurrentView('list')" md-button color="accent">LIST</button>
<button (click)="setCurrentView('dense')" md-button color="accent">DENSE LIST</button>
<button (click)="setCurrentView('grid')" md-button color="accent">GRID</button>
</md-toolbar>
<div style="padding: 10px">
<div [ngSwitch]="currentView">
<md-nav-list *ngSwitchCase="'list'">
<div *ngFor="let turtle of turtles">
<a md-list-item [href]="turtle.link" target="_blank">
<img md-list-avatar [src]="turtle.thumb" alt="...">
<h3 md-line> {{turtle.name}} </h3>
<p md-line>
<span> {{turtle.description}} </span>
</p>
</a>
<md-divider></md-divider>
</div>
</md-nav-list>
<md-nav-list *ngSwitchCase="'dense'" dense>
<div *ngFor="let turtle of turtles">
<a md-list-item [href]="turtle.link" target="_blank">
<img md-list-avatar [src]="turtle.thumb" alt="...">
<h3 md-line> {{turtle.name}} </h3>
<p md-line>
<span> {{turtle.description}} </span>
</p>
</a>
<md-divider></md-divider>
</div>
</md-nav-list>
<md-grid-list *ngSwitchCase="'grid'" cols="2">
<a [href]="turtle.link" target="_blank" *ngFor="let turtle of turtles">
<md-grid-tile [style.background]="'url(' + turtle.thumb + ')'">
<span class="name">{{turtle.name}}</span>
<span class="description">{{turtle.description}}</span>
</md-grid-tile>
</a>
</md-grid-list>
<h3 *ngSwitchDefault>Please select a layout above</h3>
</div>
</div>
<!--
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
-->
/** 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 {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
BrowserModule,
MaterialModule.forRoot(),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
/*
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
*/
body {
margin: 0;
background: #7aae47;
}
button {
color: #7aae47 !important;
}
md-toolbar {
background-color: #5f3694;
color: white;
}
.toolbar-spacer {
flex: 1 1 auto;
}
md-grid-tile {
background-size: cover !important;
position: relative;
color: white;
}
md-grid-tile:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, 0.3);
z-index: 0;
}
md-grid-tile figure {
z-index: 1;
padding: 10px !important;
}
md-grid-tile:hover figure {
background: rgba(0,0,0, 0.5);
}
md-grid-tile:hover .name {
display: none;
}
md-grid-tile .description {
display: none;
}
md-grid-tile:hover .description {
display: block;
}