- added a new goToStep directive that let's you navigate to a given step either by its index or by the step object itself

- changed the click listener in the wizard navigation bar to the new goToStep directive
- modified the tests to work with the new directive and its corresponding changes

Author: madoar

src/components/components/wizard-navigation-bar.component.html

@@ -7,6 +7,6 @@
         editing: step.selected && step.completed,
         optional: step.optional && !step.completed && !step.selected
   }">
-    <a (click)="goToStep(step)">{{step.title}}</a>
+    <a [goToStep]="step">{{step.title}}</a>
   </li>
 </ul>

src/components/components/wizard-navigation-bar.component.spec.ts

@@ -6,6 +6,7 @@ import {DebugElement, QueryList} from '@angular/core';
 import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
 import {WizardComponent} from "./wizard.component";
 import {WizardStepComponent} from "./wizard-step.component";
+import {GoToStepDirective} from "../directives/go-to-step.directive";
 
 describe('WizardNavigationBarComponent', () => {
   let component: WizardNavigationBarComponent;
@@ -17,7 +18,7 @@ describe('WizardNavigationBarComponent', () => {
     wizard.wizardSteps = new QueryList<WizardStepComponent>();
 
     TestBed.configureTestingModule({
-      declarations: [WizardNavigationBarComponent, WizardComponent, WizardStepComponent],
+      declarations: [WizardNavigationBarComponent, WizardComponent, WizardStepComponent, GoToStepDirective],
       providers: [{ provide: WizardComponent, useValue: wizard }]
     })
       .compileComponents();

src/components/components/wizard-navigation-bar.component.ts

@@ -18,11 +18,4 @@ export class WizardNavigationBarComponent {
   numberOfWizardSteps(): number {
     return this.wizard.wizardSteps.length;
   }
-
-  goToStep(nextStep: WizardStepComponent): void {
-    if (this.wizard.canGoToStep(nextStep)) {
-      // If the next step is enterable, then enter it
-      this.wizard.goToStep(nextStep);
-    }
-  }
 }

src/components/components/wizard.component.spec.ts

@@ -4,6 +4,7 @@ import {QueryList, Component, ViewChild} from "@angular/core";
 import {WizardComponent} from "./wizard.component";
 import {WizardStepComponent} from "./wizard-step.component";
 import {WizardNavigationBarComponent} from "./wizard-navigation-bar.component";
+import {GoToStepDirective} from "../directives/go-to-step.directive";
 
 @Component({
   selector: "test-wizard",
@@ -44,7 +45,7 @@ describe('WizardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent ]
+      declarations: [ WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective ]
     })
     .compileComponents();
   }));

src/components/directives/go-to-step.directive.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * Created by marc on 09.01.17.
+ */
+import {GoToStepDirective} from "./go-to-step.directive";
+
+describe('GoToStepDirective', () => {
+  it('should create an instance', () => {
+    let directive = new GoToStepDirective(null);
+    expect(directive).toBeTruthy();
+  });
+});

src/components/directives/go-to-step.directive.ts

@@ -0,0 +1,28 @@
+/**
+ * Created by marc on 09.01.17.
+ */
+
+import {Directive, Output, HostListener, EventEmitter, Input} from '@angular/core';
+import {WizardComponent} from "../components/wizard.component";
+import {WizardStepComponent} from "../components/wizard-step.component";
+
+@Directive({
+  selector: '[goToStep]'
+})
+export class GoToStepDirective {
+  @Output()
+  public finalize = new EventEmitter();
+
+  @Input('goToStep')
+  public destinationStep: WizardStepComponent | number;
+
+  constructor(private wizard: WizardComponent) { }
+
+  @HostListener('click', ['$event']) onClick(): void {
+    if (this.wizard.canGoToStep(this.destinationStep)) {
+      this.finalize.emit();
+
+      this.wizard.goToStep(this.destinationStep);
+    }
+  }
+}

src/components/directives/index.ts

@@ -2,6 +2,7 @@
  * Created by marc on 29.12.16.
  */
 
+export {GoToStepDirective} from "./go-to-step.directive";
 export {NextStepDirective} from './next-step.directive';
 export {PreviousStepDirective} from './previous-step.directive';
 export {OptionalStepDirective} from './optional-step.directive';

src/components/wizard.module.ts

@@ -7,13 +7,15 @@ import {NextStepDirective} from './directives/next-step.directive';
 import {PreviousStepDirective} from './directives/previous-step.directive';
 import {OptionalStepDirective} from './directives/optional-step.directive';
 import {WizardNavigationBarComponent} from './components/wizard-navigation-bar.component';
+import {GoToStepDirective} from "./directives/go-to-step.directive";
 
 
 @NgModule({
   declarations: [
     WizardComponent,
     WizardStepComponent,
     WizardNavigationBarComponent,
+    GoToStepDirective,
     NextStepDirective,
     PreviousStepDirective,
     OptionalStepDirective,
@@ -25,6 +27,7 @@ import {WizardNavigationBarComponent} from './components/wizard-navigation-bar.c
     WizardComponent,
     WizardStepComponent,
     WizardNavigationBarComponent,
+    GoToStepDirective,
     NextStepDirective,
     PreviousStepDirective,
     OptionalStepDirective,