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:
`

<li class="nav-item" *ngFor="let step of steps" [ngClass]="{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}">
<a (click)="goToStep(step)">{{step.title}}

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

` , 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 <form-wizard> to <form-wizard #wizard> ?

…

On Wed, Oct 4, 2017 at 2:48 PM, Midhilaj ***@***.***> wrote: my html <form-wizard> <wizard-step [title]="'Step1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)"> <h1>Step1</h1> <form #emailForm="ngForm"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" [(ngModel)]="data.email" required> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> </form> </wizard-step> <wizard-step [title]="'Step2'" (onNext)="onStep2Next($event)"> <h1>Step2</h1> </wizard-step> <wizard-step [title]="'Step3'" (onNext)="onStep3Next($event)"> <h1>Step3</h1> </wizard-step> <wizard-step [title]="'Step4'" (onComplete)="onComplete($event)"> <div [ngSwitch]="isCompleted"> <div *ngSwitchDefault> <h1>Step4</h1> </div> <div *ngSwitchCase="true"> <h4>Thank you! You have completed all the steps.</h4> </div> </div> </wizard-step> </form-wizard> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#19 (comment)>, 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?