<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/zone.js@0.6.26/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="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<formly-demo-hello-app>
loading...
</formly-demo-hello-app>
</body>
</html>
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.c-select {
display: block;
width: 100%;
}
/* Checkbox Toggle */
.checkbox-toggle {
margin: 0;
padding: 0;
}
.checkbox-toggle input[type="checkbox"] {
display: none;
}
.checkbox-toggle input[type="checkbox"]:checked + label {
border-color: #0275D8;
background: #0275D8;
box-shadow: inset 0 0 0 20px #0275D8;
}
.checkbox-toggle input[type="checkbox"]:checked + label.toggle-alert {
border-color: #f10000;
background: #f10000;
box-shadow: inset 0 0 0 20px #f10000;
}
.checkbox-toggle label {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
display: inline-block;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #ECEEEF;
box-shadow: inset 0 0 0 0 #0275D8;
}
.checkbox-toggle label div {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background: white;
width: 30px;
height: 30px;
border-radius: 50%;
}
.checkbox-toggle--large label div {
width: 41px;
height: 41px;
}
.checkbox-toggle label:hover, .checkbox-toggle label > div:hover {
cursor: pointer;
}
.checkbox-toggle input[type="checkbox"]:checked + label > div {
margin-left: 36px;
}
.checkbox-toggle--large input[type="checkbox"]:checked + label > div {
margin-left: 55px;
}
.checkbox-toggle label {
border: 2px solid #ECEEEF;
border-radius: 42px;
height: 34px;
width: 70px;
}
.checkbox-toggle--large label {
width: 100px;
height: 45px;
}
### Angular2 Starter Plunker - Typescript - RC.0
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
For opening
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',
'ng-formly': 'npm:ng-formly/bundles/ng-formly.umd.min.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)
// polyfills
// import 'core-js/es6';
// import 'core-js/es7/reflect';
// import 'zone.js/dist/zone';
import { NgModule, Component, enableProdMode } from '@angular/core';
import { FormsModule, ReactiveFormsModule, Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { FormlyModule, FormlyFieldConfig, FormlyBootstrapModule } from 'ng-formly';
// import { ValidationService } from './validation.service';
// import { RepeatComponent } from './repeatedSection';
import { FormlyFieldToggle } from './toggle';
// import { FormlyWrapperHorizontalLabel } from './horizontal.wrapper';
// import { FormlyPanelWrapper } from './panel.wrapper';
@Component({
selector: 'formly-demo-hello-app',
templateUrl: './template.html',
})
export class HelloApp {
form: FormGroup;
author;
env;
_user;
user: any = {};
options;
private userFields: Array<FormlyFieldConfig> = [];
constructor(fb: FormBuilder) {
this.form = fb.group({});
this.author = {
name: 'Mohammed Zama Khan',
url: 'https://www.github.com/mohammedzamakhan',
};
this.env = {
angularVersion: '2.1.1',
formlyVersion: '2.0.0-beta.13',
};
let userFields: Array<FormlyFieldConfig> = [{
key: 'toggleVal',
type: 'toggle',
to: {
isAlert: true,
isLarge: false,
},
}
];
setTimeout(() => this.userFields = userFields);
this.user = {
toggleVal: true
};
this.options = {
formState: {
readOnly: true,
},
};
}
console(data) {
console.log(data);
}
hide() {
this.userFields[1].fieldGroup[0].hideExpression = !this.userFields[1].fieldGroup[0].hideExpression;
}
toggleReadOnly(value) {
this.options.formState.readOnly = value;
}
resetForm() {
this.form.reset({
checked: true,
toggleVal: true
});
}
submit(user) {
console.log(user);
}
}
@NgModule({
declarations: [
HelloApp, FormlyFieldToggle
],
imports: [
BrowserModule,
FormlyModule.forRoot({
types: [
{ name: 'toggle', component: FormlyFieldToggle, defaultOptions: { to: { isAlert: false, isLarge: true }}}
]
}),
FormlyBootstrapModule,
FormsModule,
ReactiveFormsModule,
],
bootstrap: [HelloApp],
})
export class FormlyDemoModule {
}
enableProdMode();
platformBrowserDynamic().bootstrapModule(FormlyDemoModule);
<div class="container">
<h1>NG2-formly example: Custom Component</h1>
<p>This is an example of an ng-formly custom component.</p>
<hr>
<form class="formly" role="form" novalidate [formGroup]="form" (ngSubmit)="submit(user)">
<formly-form [model]="user" [fields]="userFields" [form]="form">
</formly-form>
</form>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/ng2-formly">ng2-formly</a>
project made with ♥ by
<strong>
<span *ngIf="!author.name || !author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" href="{{author.url}}">
{{author.name}}
</a>
</strong>
<br />
This example is running angular version "{{env.angularVersion}}" and formly version "{{env.formlyVersion}}"
</small>
</div>
</div>
import { Component } from '@angular/core';
import { Field } from 'ng-formly';
@Component({
selector: 'formly-field-toggle',
template: `
<div [formGroup]="form" *ngIf="!options?.formState?.readOnly">
<div class="checkbox-toggle" [ngClass]="isLarge">
<input id="checkbox" type="checkbox" type="checkbox" [formControlName]="key" value="on">
<label for="checkbox" [ngClass]="isAlert">
<div></div>
</label>
</div>
</div>
<div *ngIf="options?.formState?.readOnly">
{{model}}
</div>
`,
})
export class FormlyFieldToggle extends Field {
get isAlert() {
if (this.to['isAlert']) {
return 'toggle-alert';
}
return '';
}
get isLarge() {
if (this.to['isLarge']) {
return 'checkbox-toggle--large';
}
return '';
}
}