<!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>