<!DOCTYPE html>
<html>
<head>
<title>@baumi/agular2-select</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.0/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.12/zone.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/systemjs/0.19.36/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://material-plunker.firebaseapp.com/HEAD_bundle.js?sha=882835"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<script>
System
.import('app/main.ts')
.catch(console.error.bind(console));
</script>
<!-- Load the core.css stylesheet manually (temporary) -->
<link href="https://npmcdn.com/@angular2-material/core@latest/style/core.css">
</head>
<body>
<my-app>Loading...</my-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
-->
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
}
}
});
/** Angular Material 2 Components */
var components = [
'all',
'button',
'card',
'checkbox',
'dialog',
'grid-list',
'icon',
'input',
'list',
'menu',
'progress-bar',
'progress-circle',
'radio',
'sidenav',
'slider',
'slide-toggle',
'button-toggle',
'tabs',
'toolbar',
'tooltip'
];
/** Default Packages to be mapped to an index file */
var barrels = [
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/http',
'@angular/forms',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'rxjs'
];
/** Default Mappings */
var _map = {
'@angular2-material/core': 'core',
'@angular': 'vendor/@angular',
'rxjs': "https://unpkg.com/rxjs@5.0.0-beta.11",
'main': 'main.js',
'angular2-select': 'https://unpkg.com/@baumi/angular2-select@2.1.4/angular2-select.js'
};
var _packages = {
'@angular2-material/core': {
main: 'core',
}
}
/**Generate Mappings and Packages from specified packages. */
components.forEach(function (name) {
_map["@angular2-material/" + name] = "components/" + name;
});
components.forEach(function (name) {
_packages[("@angular2-material/" + name)] = {
main: name ,
defaultExtension: 'js'
};
});
barrels.forEach(function (barrelName) {
_packages[barrelName] = { main: 'index' };
});
System.config({
map: _map,
packages: _packages
});
/*
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
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile and launch the module
platformBrowserDynamic().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 { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule,
ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from "./app.component";
import { Angular2SelectModule } from "angular2-select";
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
Angular2SelectModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
import { Component,
OnInit } from '@angular/core';
import { FormGroup,
FormControl,
Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/delay';
export class Option {
value: string;
name: string;
selected?: boolean;
disabled?: boolean;
}
@Component({
selector: 'my-app',
styles: [`
div.selector-container {
width:200px;
margin:20px;
float:left;
}
div.notifications {
position: fixed;
bottom:0;
padding:40px;
}
div.error {
color: red;
}
div.divider {
clear:both;
margin:20px;
}
`],
template: `
<div>
<h2>angular2-select</h2>
<div class="selector-container">
<h4>Simple selector:</h4>
<bm-ng2-select
placeholder="Select a country"
(selectionChanged)="onSelectionChange('Country', $event);">
<bm-ng2-option value="PL">Poland</bm-ng2-option>
<bm-ng2-option value="US" disabled="true">USA</bm-ng2-option>
<bm-ng2-option value="DK" selected="true">Denmark</bm-ng2-option>
<bm-ng2-option value="FR">France</bm-ng2-option>
</bm-ng2-select>
</div>
<div class="selector-container">
<h4>Asynchronously loaded:</h4>
<bm-ng2-select
placeholder="Select an item"
(selectionChanged)="onSelectionChange('Item', $event);">
<bm-ng2-option
*ngFor="let item of selectorOptions"
value="{{item.value}}"
selected="{{item.selected}}"
disabled="{{item.disabled}}">{{item.name}}</bm-ng2-option>
</bm-ng2-select>
</div>
<div class="divider"></div>
<div class="selector-container">
<form [formGroup]="demoForm">
<h4>Model driven form:</h4>
<bm-ng2-select
formControlName="person"
placeholder="Select person"
required=true
(selectionChanged)="onSelectionChange('Name', $event);">
<bm-ng2-option value="ANNA">Anna</bm-ng2-option>
<bm-ng2-option value="NATALIA">Natalia</bm-ng2-option>
<bm-ng2-option value="KASIA">Kasia</bm-ng2-option>
</bm-ng2-select>
</form>
<div class="error" *ngIf="!demoForm.controls.person.valid">
This field is required
</div>
</div>
<div class="selector-container">
<form #f="ngForm">
<h4>Template driven form:</h4>
<bm-ng2-select
[(ngModel)]="formName"
name="color"
placeholder="Select color"
(selectionChanged)="onSelectionChange('Color', $event);">
<bm-ng2-option value="RED">Red</bm-ng2-option>
<bm-ng2-option value="BLACK">Black</bm-ng2-option>
<bm-ng2-option value="YELLOW">Yellow</bm-ng2-option>
</bm-ng2-select>
</form>
</div>
<div class="notifications">
Notifications: {{ message }}
</div>
</div>
`,
})
export class AppComponent implements OnInit {
private message: string;
private messageClearTimeout: any;
private demoForm: FormGroup;
private selectorOptions: Option[] = [];
private formName: string = 'YELLOW';
constructor() {
}
ngOnInit() {
this.demoForm = new FormGroup({
person: new FormControl('')
});
this.getAsynchronously();
}
getAsynchronously() {
let options: Option[] = [{
value: 'SOFA',
name: 'Sofa'
}, {
value: 'TV',
name: 'TV',
selected: true
}, {
value: 'TABLE',
name: 'Table',
disabled: true
}];
let subscription = Observable.from(options).delay(1000).subscribe(
option => {
this.selectorOptions.push(option);
},
err => {
console.log(err);
},
() => {
this.setMessage('Content of selector asynchronously loaded!');
}
);
}
setMessage(msg: string) {
this.message = msg;
this.clearMessage();
}
clearMessage() {
if (this.messageClearTimeout)
clearTimeout(this.messageClearTimeout);
this.messageClearTimeout = setTimeout(() => { this.message = null; }, 2000);
}
onSelectionChange(selector: string, value: string) {
this.setMessage('Selector ' + selector + ' value has changed to: ' + value);
}
}
@baumi/angular2-select demo