<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular playground</title>
<link href="https://unpkg.com/@angular/material@2.0.0-beta.7/prebuilt-themes/indigo-pink.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app>
loading...
</app>
</body>
</html>
### Angular Starter Plunker - Typescript
var angularVersion = '@4.0.3';
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'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/material': 'npm:@angular/material@2.0.0-beta.7/bundles/material.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'ngx-stepper': 'npm:ngx-stepper@latest/bundles/ngx-stepper.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.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, OnInit, ViewChild} from '@angular/core';
import {BrowserModule, DomSanitizer} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {MdRippleModule, MdButtonModule, MdIconModule, MdIconRegistry} from '@angular/material';
import {NgxStepperModule, StepperOptions, NgxStepperComponent} from 'ngx-stepper';
import "rxjs/Rx";
@Component({
selector: 'app',
template: `
<div class="toggle-options">
<button md-button class="md-primary md-raised-button" (click)="toggleMobileStepText()">Toggle MobileStepText</button>
<button md-button class="md-primary md-raised" (click)="toggleVertical()">Toggle Vertical</button>
<button md-button class="md-primary md-raised" (click)="toggleLinear()">Toggle Linear</button>
<button md-button class="md-primary md-raised" (click)="toggleAlternative()">Toggle Alternative</button>
<button md-button class="md-primary md-raised" (click)="showError()">Show error</button>
<button md-button class="md-primary md-raised" (click)="clearError()">Clear error</button>
<button md-button class="md-primary md-raised" (click)="showFeedback()">Show Feedback</button>
<button md-button class="md-primary md-raised" (click)="clearFeedback()">Clear Feedback</button>
</div>
<ngx-stepper #stepperDemo [options]="options">
<ngx-step [label]="'Select a campaign'">
<ngx-step-body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
</ngx-step-body>
<ngx-step-actions>
<button md-button class="md-primary md-raised" (click)="selectCampaign()">Continue</button>
<button md-button class="md-primary" (click)="cancel()">Cancel</button>
</ngx-step-actions>
</ngx-step>
<ngx-step [label]="'Create an group'">
<ngx-step-body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
</ngx-step-body>
<ngx-step-actions>
<button md-button class="md-primary md-raised" (click)="nextStep()">Continue</button>
<button md-button class="md-primary" (click)="previousStep()">Back</button>
</ngx-step-actions>
</ngx-step>
<ngx-step [label]="'Create an ad'">
<ngx-step-body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
</ngx-step-body>
<ngx-step-actions>
<button md-button class="md-primary md-raised" (click)="nextStep()">Continue</button>
<button md-button class="md-primary" (click)="previousStep()">Back</button>
</ngx-step-actions>
</ngx-step>
<ngx-step [label]="'Publish the ad'">
<ngx-step-body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nobis saepe facere suscipit atque,
sapiente, natus mollitia ipsum odit accusamus repellendus deserunt. Odio sit similique, labore maxime
voluptatibus, eaque autem!</p>
</ngx-step-body>
<ngx-step-actions>
<button md-button class="md-primary md-raised" (click)="nextStep()">Complete</button>
<button md-button class="md-primary" (click)="previousStep()">Back</button>
</ngx-step-actions>
</ngx-step>
</ngx-stepper>
`
})
export class App implements OnInit {
@ViewChild('stepperDemo')
public steppers: NgxStepperComponent;
public options: StepperOptions = {
vertical: false,
linear: true,
alternative: true,
mobileStepText: true,
enableSvgIcon: true
};
public campaign = false;
constructor(private _iconRegistry: MdIconRegistry,
private _sanitizer: DomSanitizer) {
// empty
}
public ngOnInit(): void {
this._iconRegistry
.addSvgIcon('step-done', this._sanitizer.bypassSecurityTrustResourceUrl('assets/icon/done.svg'));
this._iconRegistry
.addSvgIcon('step-warning', this._sanitizer.bypassSecurityTrustResourceUrl('assets/icon/warning.svg'));
}
public selectCampaign(): void {
this.steppers.showFeedback('Checking, please wait ...');
setTimeout(() => {
if (this.campaign) {
this.steppers.clearError();
this.steppers.next();
} else {
this.campaign = !this.campaign;
this.steppers.error('Wrong campaign');
}
}, 3000);
}
public previousStep(): void {
this.steppers.back();
}
public cancel(): void {
this.steppers.back();
}
public nextStep(): void {
this.steppers.next();
}
public toggleMobileStepText(): void {
this.options.mobileStepText = !this.options.mobileStepText;
this.options = Object.assign({}, this.options);
}
public toggleLinear(): void {
this.options.linear = !this.options.linear;
this.options = Object.assign({}, this.options);
}
public toggleAlternative(): void {
this.options.alternative = !this.options.alternative;
this.options = Object.assign({}, this.options);
}
public toggleVertical(): void {
this.options.vertical = !this.options.vertical;
this.options = Object.assign({}, this.options);
}
public showError(): void {
this.steppers.error('Wrong campaign');
}
public clearError(): void {
this.steppers.clearError();
}
public showFeedback(): void {
this.steppers.showFeedback('Step 1 looks great! Step 2 is comming up.');
}
public clearFeedback(): void {
this.steppers.clearFeedback();
}
}
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
MdRippleModule,
MdButtonModule,
MdIconModule,
NgxStepperModule
],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512.209px" height="512.209px" viewBox="0 0 512.209 512.209" style="enable-background:new 0 0 512.209 512.209;"
xml:space="preserve">
<g>
<path d="M507.345,439.683L288.084,37.688c-3.237-5.899-7.71-10.564-13.429-13.988c-5.705-3.427-11.893-5.142-18.554-5.142
s-12.85,1.718-18.558,5.142c-5.708,3.424-10.184,8.089-13.418,13.988L4.859,439.683c-6.663,11.998-6.473,23.989,0.57,35.98
c3.239,5.517,7.664,9.897,13.278,13.128c5.618,3.237,11.66,4.859,18.132,4.859h438.529c6.479,0,12.519-1.622,18.134-4.859
c5.62-3.23,10.038-7.611,13.278-13.128C513.823,463.665,514.015,451.681,507.345,439.683z M292.655,411.132
c0,2.662-0.91,4.897-2.71,6.704c-1.807,1.811-3.949,2.71-6.427,2.71h-54.816c-2.474,0-4.616-0.899-6.423-2.71
c-1.809-1.807-2.713-4.042-2.713-6.704v-54.248c0-2.662,0.905-4.897,2.713-6.704c1.807-1.811,3.946-2.71,6.423-2.71h54.812
c2.479,0,4.62,0.899,6.428,2.71c1.803,1.807,2.71,4.042,2.71,6.704v54.248H292.655z M292.088,304.357
c-0.198,1.902-1.198,3.47-3.001,4.709c-1.811,1.238-4.046,1.854-6.711,1.854h-52.82c-2.663,0-4.947-0.62-6.849-1.854
c-1.908-1.243-2.858-2.807-2.858-4.716l-4.853-130.47c0-2.667,0.953-4.665,2.856-5.996c2.474-2.093,4.758-3.14,6.854-3.14h62.809
c2.098,0,4.38,1.043,6.854,3.14c1.902,1.331,2.851,3.14,2.851,5.424L292.088,304.357z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="442.533px" height="442.533px" viewBox="0 0 442.533 442.533" style="enable-background:new 0 0 442.533 442.533;"
xml:space="preserve">
<g>
<path d="M434.539,98.499l-38.828-38.828c-5.324-5.328-11.799-7.993-19.41-7.993c-7.618,0-14.093,2.665-19.417,7.993L169.59,247.248
l-83.939-84.225c-5.33-5.33-11.801-7.992-19.412-7.992c-7.616,0-14.087,2.662-19.417,7.992L7.994,201.852
C2.664,207.181,0,213.654,0,221.269c0,7.609,2.664,14.088,7.994,19.416l103.351,103.349l38.831,38.828
c5.327,5.332,11.8,7.994,19.414,7.994c7.611,0,14.084-2.669,19.414-7.994l38.83-38.828L434.539,137.33
c5.325-5.33,7.994-11.802,7.994-19.417C442.537,110.302,439.864,103.829,434.539,98.499z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>