fssolutions / ng2-wizard

MIT License
15 stars 7 forks source link

hi how to create next and prev buttons and progress bar #9

Open maxto024 opened 7 years ago

maxto024 commented 7 years ago

please how can i create next and previous button also progress bar thanks

fssolutions commented 7 years ago

I show two ways to control the currentStep...

.html <wizard [currentStep]="currentStep"> ... </wizard>

.ts

export class Sample{
     @ViewChild(WizardComponent) private wizardComponent: WizardComponent;
     private currentStep: number = 0;

     //First way
     private setStep(id: number | string): void {
        if (id == 'prev' || id == 'previous') {
            this.currentStep--;
            return;
        }
        if (id == 'next') {
            this.currentStep++;
            return;
        }
        this.setStepNumber(+id);
    }

     //Second way
     private setStepNumber(id: number): void {
        this.wizardComponent.setCurrentStep(id);
        //other way to next
        //this.wizardComponent.currentStep++;
     }
}

About progress bar, you can manage internally, because i don't know where you to wish use

simple example

private showBar: boolean = false;

private loadBar(): void {
   this.showBar = true;
   setTimeout(()=> {
      this.showBar = false;
      this.setStep('next');
   }, 2000);
}