<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<!--<link data-require="jasmine@2.4.1" data-semver="2.4.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" />-->
<!--<script data-require="jasmine@2.4.1" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>-->
<!--<script data-require="jasmine@2.4.1" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>-->
<!--<script data-require="jasmine@2.4.1" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>-->
<link rel="stylesheet" href="style.css" />
<!-- Load the Angular Material stylesheet -->
<link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<!-- <script src="https://unpkg.com/zone.js/dist/proxy.js?main=browser"></script>
<script src="https://unpkg.com/zone.js/dist/sync-test.js?main=browser"></script>
<script src="https://unpkg.com/zone.js/dist/jasmine-patch.js?main=browser"></script>
<script src="https://unpkg.com/zone.js/dist/async-test.js?main=browser"></script>
<script src="https://unpkg.com/zone.js/dist/fake-async-test.js?main=browser"></script>
--> <script>
System.import('app')
.catch(console.error.bind(console));
var __spec_files__ = [
'src/app.spec.ts'
];
</script>
<!--<script src="browser-test-shim.js"></script>-->
</head>
<body>
<my-app>
loading Angular2 Material - md-checkbox...
</my-app>
<div style="position: absolute; bottom: 10px; left: 10px;">
<a style="text-decoration: none; color: #000000;" href="https://github.com/joejordanbrown" target="_blank">GitHub</a>
</div>
<div style="position: absolute; bottom: 10px; right: 10px;">
<a style="text-decoration: none; color: #000000;" href="https://uixd.co.uk" target="_blank">Created by UIXD</a>
</div>
</body>
</html>
/* Styles go here */
body {
margin: 0;
}
.container {
padding: 24px;
}
md-card {
margin: 24px 0;
}
# Angular2 Material - md-checkbox example
[Material Examples by UIXD](https://uixd.co.uk)
---------------------------------------------------------
## Checkout other examples on profile:
http://plnkr.co/users/joejordanbrown
https://stackblitz.com/@joejordanbrown
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 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/animations': "https://unpkg.com/@angular/animations/bundles/animations.umd.js",
'@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.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/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js',
'@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js',
'@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js',
'@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js',
'@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js',
'@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js',
'@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js',
'@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js',
'@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js',
'@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js',
'@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',
'zone.js/dist/zone':'npm:zone.js/dist/zone.js',
'zone.js/dist/long-stack-trace-zone':'npm:zone.js/dist/long-stack-trace-zone.js',
'zone.js/dist/fake-async-test':'npm:zone.js/dist/fake-async-test.js',
'zone.js/dist/async-test':'npm:zone.js/dist/async-test.js',
'zone.js/dist/sync-test':'npm:zone.js/dist/sync-test.js',
'zone.js/dist/proxy':'npm:zone.js/dist/proxy.js',
'zone.js/dist/jasmine-patch':'npm:zone.js/dist/jasmine-patch.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'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
import {MaterialModule} from '@angular/material'
@Component({
selector: 'my-app',
template: `
<md-toolbar color="primary"><h1>Angular2 Material - md-checkbox vs native example </h1></md-toolbar>
<div class="container">
<md-card>
<md-checkbox [(ngModel)]="checked" [indeterminate]="indeterminate">
Active
</md-checkbox>
<br>
<label>
<input type="checkbox" [(ngModel)]="checked" [indeterminate]="indeterminate">
Active
</label>
<br><br><br>
<button (click)="checked=!checked">Toggle Checked: {{checked}}</button>
<button (click)="indeterminate=!indeterminate">Toggle Indeterminate: {{indeterminate}}</button><br>
</md-card>
<md-card>
<p>
A material design checkbox component. Supports all of the functionality of an HTML5 checkbox, and exposes a similar API. A MdCheckbox can be either checked, unchecked, indeterminate, or disabled. Note that all additional accessibility attributes are taken care of by the component, so there is no need to provide them yourself. However, if you want to omit a label and still have the checkbox be accessible, you may supply an [aria-label] input. See: <a href="https://www.google.com/design/spec/components/selection-controls.html">https://www.google.com/design/spec/components/selection-controls.html</a>
</p>
</md-card>
<a href="https://material.angular.io/components/checkbox/examples" target="_blank" md-raised-button color="primary">View Documenation</a>
</div>
`,
})
export class App {
checked: boolean = true;
indeterminate: boolean = true;
}
@NgModule({
imports: [ BrowserModule , FormsModule, MaterialModule],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
import { FormsModule } from '@angular/forms' ;
import { BrowserModule } from '@angular/common';
import { DebugElement } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { By } from '@angular/platform-browser';
/* tslint:disable:no-unused-variable */
import { async,ComponentFixture, TestBed } from '@angular/core/testing';
import { App } from './app';
describe("App component", ()=>{
let fixture: ComponentFixture;
let component: App;
beforeEach(async(()=>{
TestBed.configureTestingModule({
imports: [BrowserModule, FormsModule, MaterialModule.forRoot()],
declarations: [App]
}).compileComponents();
fixture = TestBed.createComponent(App);
component = fixture.componentInstance;
console.log(fixture);
}));
it("should add well", ()=>{
let checkbox = fixture.debugElement.query(By.css('md-checkbox'));
expect(checkbox).toBeTruthy();
})
});
// BROWSER TESTING SHIM
// Keep it in-sync with what karma-test-shim does
/*global jasmine, __karma__, window*/
(function () {
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //
jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
var baseURL = document.baseURI;
baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
System.config({
baseURL: baseURL,
// Extend usual application package list with test folder
packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
// Assume npm: is set in `paths` in systemjs.config
// Map the angular testing umd bundles
map: {
'@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',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
},
});
System.import('systemjs.config.js')
.then(importSystemJsExtras)
.then(initTestBed)
.then(initTesting);
/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
return System.import('systemjs.config.extras.js')
.catch(function(reason) {
console.log(
'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
);
console.log(reason);
});
}
function initTestBed(){
return Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
])
.then(function (providers) {
var coreTesting = providers[0];
var browserTesting = providers[1];
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting());
})
}
// Import all spec files defined in the html (__spec_files__)
// and start Jasmine testrunner
function initTesting () {
console.log('loading spec files: '+__spec_files__.join(', '));
return Promise.all(
__spec_files__.map(function(spec) {
return System.import(spec);
})
)
// After all imports load, re-execute `window.onload` which
// triggers the Jasmine test-runner start or explain what went wrong
.then(success, console.error.bind(console));
function success () {
console.log('Spec files loaded; starting Jasmine testrunner');
window.onload();
}
}
})();
/*
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 specific SystemJS configuration */
System.config({
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: '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
*/