angular2-wizard
angular2-wizard copied to clipboard
maiyaporn
Added a reset option, so you can reuse the wizard.
Nothing fancy, just a reset button, so you can do something like
@ViewChild('wizard')
wizard: WizardComponent;
onComplete() {
//do work
this.wizard.reset();
}
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: `
private _steps: Array<WizardStepComponent> = []; public _isCompleted: boolean = false;
@Output() onStepChanged: EventEmitter<WizardStepComponent> = new EventEmitter<WizardStepComponent>();
constructor() { }
ngAfterContentInit() { this.wizardSteps.forEach(step => this._steps.push(step)); this.steps[0].isActive = true; }
get steps(): Array<WizardStepComponent> { 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.
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.
Can i see your html, basically your html has a
@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.
Ok now did you try to change
On Wed, Oct 4, 2017 at 2:48 PM, Midhilaj [email protected] wrote:
my html
<wizard-step [title]="'Step1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)"> Step1
<form #emailForm="ngForm">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 .
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
I am looking forward to this feature, what happened then? Will it be merged, or it doesn't work?
