Last active
March 6, 2017 10:34
-
-
Save fxck/16657b6c4bf3f58484c4d54ae373bfe7 to your computer and use it in GitHub Desktop.
material2 select
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div style="padding: 7px"> | |
<sub-component | |
[options]="options$ | async" | |
[param]="routeParam$ | async"> | |
</sub-component> | |
<p *ngIf="version | async" style="color: #333"> | |
Using Angular Material | |
(SHA {{ (version | async)?.commit.message.split(" ")[0] }}) from | |
{{ (version | async)?.commit.author.date | date: 'short' }} | |
</p> | |
</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 | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component,Input,ChangeDetectionStrategy} from '@angular/core'; | |
import {Http} from '@angular/http' | |
import {FormControl} from '@angular/forms'; | |
import {bootstrap} from '@angular/platform-browser-dynamic'; | |
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; | |
@Component({ | |
selector: 'material-app', | |
templateUrl: 'app.component.html' | |
}) | |
export class AppComponent { | |
options$ = new BehaviorSubject([]); | |
routeParam$ = new BehaviorSubject(undefined); | |
private version: any; | |
constructor(http: Http) { | |
// Display the currently used Material 2 version. | |
this.version = http | |
.get('https://api.github.com/repos/angular/material2-builds/commits/HEAD') | |
.map(res => res.json()) | |
this.options$.next([ | |
{ | |
id: 'default', | |
label: 'Foo' | |
}, | |
{ | |
id: 1, | |
label: 'Bar' | |
}, | |
{ | |
id: 2, | |
label: 'Baz' | |
} | |
]); | |
// when coming from the real route params, it's always gonna be string | |
this.routeParam$.next('1'); | |
} | |
} | |
@Component({ | |
selector: 'sub-component', | |
changeDetection: ChangeDetectionStrategy.OnPush, | |
template: ` | |
<md-select | |
placeholder="Select an option" | |
[formControl]="form" | |
floatPlaceholder="never" | |
*ngIf="options && options?.length"> | |
<md-option | |
*ngFor="let option of options" | |
[value]="option?.id"> | |
{{ option?.label }} | |
</md-option> | |
</md-select> | |
` | |
}) | |
export class SubComponent { | |
form = new FormControl(); | |
@Input() | |
options: any[]; | |
@Input() | |
set param(v) { | |
const val = !isNaN(v) | |
? parseInt(v, 10) | |
: v; | |
this.form.patchValue(val); | |
} | |
} | |
/* | |
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 | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Angular 2 Material Plunker</title> | |
<!-- Load common libraries --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.1/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.7.2/zone.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.41/system.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></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://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> | |
<style>body { font-family: Roboto, Arial, sans-serif; }</style> | |
</head> | |
<body> | |
<material-app>Loading the Angular 2 Material App...</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 | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; | |
import {BrowserModule} from '@angular/platform-browser'; | |
import {NgModule} from '@angular/core'; | |
import {CommonModule} from '@angular/common'; | |
import {ReactiveFormsModule} from '@angular/forms'; | |
import {AppComponent,SubComponent} from './app.component'; | |
import {MaterialModule} from '@angular/material'; | |
@NgModule({ | |
imports: [ | |
BrowserModule, | |
CommonModule, | |
ReactiveFormsModule, | |
MaterialModule.forRoot(), | |
], | |
declarations: [AppComponent, SubComponent], | |
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 | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Add Transpiler for Typescript */ | |
System.config({ | |
transpiler: 'typescript', | |
typescriptOptions: { | |
emitDecoratorMetadata: true | |
}, | |
packages: { | |
'.': { | |
defaultExtension: 'ts' | |
}, | |
'vendor': { | |
defaultExtension: 'js' | |
} | |
} | |
}); | |
System.config({ | |
map: { | |
'main': 'main.js', | |
// Angular specific mappings. | |
'@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js', | |
'@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js', | |
'@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js', | |
'@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js', | |
'@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js', | |
'@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js', | |
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js', | |
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', | |
'@angular/material': 'https://rawgit.com/angular/material2-builds/master/bundles/material.umd.js', | |
// Rxjs mapping | |
'rxjs': 'https://unpkg.com/rxjs' | |
}, | |
packages: { | |
// Thirdparty barrels. | |
'rxjs': { main: 'index' }, | |
} | |
}); | |
/* | |
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 | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment