Added a reset option, so you can reuse the wizard.

[karellodewijk]

Nothing fancy, just a reset button, so you can do something like

    @ViewChild('wizard') 
    wizard: WizardComponent;

    onComplete() {
                //do work
        this.wizard.reset(); 
    }

[Midhilaj]

i update node_modules/angular2-wizard/src/wizard.component.ts with the code "reset() {
this.activeStep = this.steps[0]; for (let step of this.steps) { step.isDisabled = true; } this.activeStep.isDisabled = false; this.activeStep.isActive = true; this._isCompleted = false; } "

Now wizard.component.ts

`import { Component, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit } from '@angular/core'; import { WizardStepComponent } from './wizard-step.component';

@Component({ selector: 'form-wizard', template: `

• {{step.title}}

<div class="card-block">
  <ng-content></ng-content>
</div>
<div class="card-footer" [hidden]="isCompleted">
    <button type="button" class="btn btn-secondary float-left" (click)="previous()" [hidden]="!hasPrevStep || !activeStep.showPrev">Previous</button>
    <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" [hidden]="!hasNextStep || !activeStep.showNext">Next</button>
    <button type="button" class="btn btn-secondary float-right" (click)="complete()" [disabled]="!activeStep.isValid" [hidden]="hasNextStep">Done</button>
</div>

` , styles: [ '.card { height: 100%; }', '.card-header { background-color: #fff; padding: 0; font-size: 1.25rem; }', '.card-block { overflow-y: auto; }', '.card-footer { background-color: #fff; border-top: 0 none; }', '.nav-item { padding: 1rem 0rem; border-bottom: 0.5rem solid #ccc; }', '.active { font-weight: bold; color: black; border-bottom-color: #1976D2 !important; }', '.enabled { cursor: pointer; border-bottom-color: rgb(88, 162, 234); }', '.disabled { color: #ccc; }', '.completed { cursor: default; }' ] }) export class WizardComponent implements AfterContentInit { @ContentChildren(WizardStepComponent) wizardSteps: QueryList;

private _steps: Array = []; public _isCompleted: boolean = false;

@Output() onStepChanged: EventEmitter = new EventEmitter();

constructor() { }

ngAfterContentInit() { this.wizardSteps.forEach(step => this._steps.push(step)); this.steps[0].isActive = true; }

get steps(): Array { return this._steps.filter(step => !step.hidden); }

get isCompleted(): boolean { return this._isCompleted; }

get activeStep(): WizardStepComponent { return this.steps.find(step => step.isActive); }

set activeStep(step: WizardStepComponent) { if (step !== this.activeStep && !step.isDisabled) { this.activeStep.isActive = false; step.isActive = true; this.onStepChanged.emit(step); } }

public get activeStepIndex(): number { return this.steps.indexOf(this.activeStep); }

get hasNextStep(): boolean { return this.activeStepIndex < this.steps.length - 1; }

get hasPrevStep(): boolean { return this.activeStepIndex > 0; }

public goToStep(step: WizardStepComponent): void { if (!this.isCompleted) { this.activeStep = step; } }

public next(): void { if (this.hasNextStep) { let nextStep: WizardStepComponent = this.steps[this.activeStepIndex + 1]; this.activeStep.onNext.emit(); nextStep.isDisabled = false; this.activeStep = nextStep; } }

public previous(): void { if (this.hasPrevStep) { let prevStep: WizardStepComponent = this.steps[this.activeStepIndex - 1]; this.activeStep.onPrev.emit(); prevStep.isDisabled = false; this.activeStep = prevStep; } } public reset() {
this.activeStep = this.steps[0]; for (let step of this.steps) { step.isDisabled = true; } this.activeStep.isDisabled = false; this.activeStep.isActive = true; this._isCompleted = false; }

public complete(): void {

this._isCompleted = true;
this.activeStep.onComplete.emit();

}

} `

My component code

AddNewComponent ` @ViewChild('wizard') wizard: WizardComponent; onComplete(e){ //do work this.wizard.reset();

}`

and when i run it showing this error
TypeError: Cannot read property 'reset' of undefined at AddNewComponent.webpackJsonp.1211.AddNewComponent.onComplete (addnew.component.ts:72) at CompiledTemplate.proxyViewClass.View_AddNewComponent0.handleEvent_116 (/Todo_Template_MakingModule/AddNewComponent/component.ngfactory.js:11274) at CompiledTemplate.proxyViewClass. (view.js:664) at SafeSubscriber.schedulerFn [as _next] (async.js:105) at SafeSubscriber.__tryOrUnsub (Subscriber.js:234) at SafeSubscriber.next (Subscriber.js:183) at Subscriber._next (Subscriber.js:125) at Subscriber.next (Subscriber.js:89) at EventEmitter.Subject.next (Subject.js:55) at EventEmitter.emit (async.js:79) at WizardComponent.webpackJsonp.1173.WizardComponent.complete (wizard.component.ts:122) at CompiledTemplate.proxyViewClass.View_WizardComponent0.handleEvent_22 (/FormWizardModule/WizardComponent/component.ngfactory.js:304) at CompiledTemplate.proxyViewClass. (view.js:664) at HTMLButtonElement. (dom_renderer.js:489) at ZoneDelegate.invokeTask (zone.js:262)

[karellodewijk]

I can't tell for certain without seeing your code, but you probably forgot to tag your wizard as in <form-wizard #wizard>.

Also don't forget the change in the complete function, it's important or the onComplete trigger will fire before _isCompleted is set and _isCompleted will be set right back to true after you reset.

[Midhilaj]

Not working

[karellodewijk]

Can i see your html, basically your html has a somewhere, you tag it with a name, like <form-wizard #wizard>. Then you bind the component in your ts like so:

@ViewChild('wizard') wizard: WizardComponent;

And now wizard contains the wizard component and you can call functions on it. Something in that process is not working right because wizard is undefined, so is never bound to the wizard component.

[karellodewijk]

Ok now did you try to change to <form-wizard #wizard> ?

On Wed, Oct 4, 2017 at 2:48 PM, Midhilaj notifications@github.com wrote:

my html

Step1

Email address We'll never share your email with anyone else.

Step2

Step3

Step4

Thank you! You have completed all the steps.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/maiyaporn/angular2-wizard/pull/19#issuecomment-334143975, or mute the thread https://github.com/notifications/unsubscribe-auth/AA3uD_ArEEt7lGqXlcSvtn2CJQi_e9lBks5so36PgaJpZM4NViAt .

[Midhilaj]

Okay, great it works

[mangeshdesai26]

Thanks @karellodewijk

[Priyank1504]

ERROR TypeError: this.wizard.reset is not a function getting this error and I did everything as mentioned above.

• <form-wizard #wizard>
• @ViewChild('wizard') wizard: WizardComponent;
• edit reset() and complete() function in wizard.component.ts

[sergiowww]

I am looking forward to this feature, what happened then? Will it be merged, or it doesn't work?