Hide 1st previous button & disable next button

[Stan92]

Hi,

Is there a way to hide the "previous button" on the first step Pane ? Setting the toolbarSettings.showPreviousButton to false it hides as expected the button. But if I set it to true (in the stepChanged event) it doesn't display it back.

Also, how to "disable" and "enable" the next button until the "validation part" is done?

thanks

[ObadaSaada]

initiate wizard configuration

config: NgWizardConfig = {
    selected: 0,
    theme: THEME.default,
    toolbarSettings: {
      showPreviousButton: false,
    }
  };

inject ngWizardService to constructor

constructor(private ngWizardService: NgWizardService) {}

to show it back inside your method fire stepChenged() event from ngWizardService

      this.config.toolbarSettings.showPreviousButton= true;
      this.ngWizardService.stepChanged();

[NIKITA-2710]

@ObadaSaada I tried doing what you have suggested still isn't able to get back my button . Is there any other way to achieve that

[ETMitch21]

@ObadaSaada did you ever find a solution to this?

[Spened]

@ObadaSaada @ETMitch21 @NIKITA-2710 Html :

<ng-wizard [config]="config" (stepChanged)="stepChanged($event)">
<ng-wizard-step [title]="'NAME'" [description]="'Name'">
<a class="btn btn-success mx-2" *ngIf="!firstStep" (click)="previousStep()">Précédent</a>

ts :

stepChanged(args: StepChangedArgs) {
    this.ngStep = args.step.title;
    switch (this.ngStep) {
      case 'NAME':
        this.firstStep = true;
        this.lastStep = false;
        this.showSave = false;
        break;
      default:
        this.firstStep = false;
        this.lastStep = false;
        this.showSave = true;
        break;
    }

This is the best I have found.

[sakthirameshkumarcd]

Using the template variable and ViewChild, we can access the NgWizardComponent.

Html <ng-wizard [config]="config" #ngWizard (stepChanged)="stepChanged($event)">

Component @ViewChild('ngWizard') ngWizard: NgWizardComponent;

and in the StepChanged event, we can set the show buttons.

stepChanged(args: StepChangedArgs) { if (args.step.index == 0){

  this.ngWizard.showPreviousButton= false;
  this.ngWizard.showNextButton= true;
}
else{

  this.ngWizard.showPreviousButton= true;
  this.ngWizard.showNextButton= false;

}