[showNext] and [showPrev] not working?

[vinhphamduc]

Hi all,

I try set display for Next or Prev button: <wizard-step (onNext)="stepNext($event)" [title]="stepName" [showNext]="showNext" [showPrev]="showPrev">

with showNext is true and showPrev is false, but always display button Next and Prev

[sanuradhag]

I have the same problem. :(

[maiyaporn]

Can you give more detail how you use the component? It's working fine in my demo - step2. It would be great if you can create a plunker to reproduce the problem.

[jdell64]

Somewhat related, but I can open a new issue if needed... Is there a way to change the index value (or other html properties) of these buttons? I want the previous button to not be the next "tabbed" value before the next button.

[tundaey]

I am having this same issue. Please kindly help

[maiyaporn]

@jdell64 I don't think there is a way to do this right now. @tundaey What exactly is the problem? The next and previous button?

[tundaey]

Yes. The next and previous buttons are the issues I am facing.

[dgluhotorenko]

Hi! I have the same problem: "Previous" and "Next" button I see on every page. I've tried to change next() method:

next() {
    if (this.hasNextStep) {
        let stepIndex = this.activeStepIndex + 1;
        let nextStep: WizardStepComponent = this.steps[stepIndex];

        if(this.steps && this.steps.length - 1 === stepIndex) {
            nextStep.showNext = false;
        }
        this.activeStep.onNext.emit();
        nextStep.isDisabled = false;
        this.activeStep = nextStep;
    }
}

but it did'n't help :(

Any suggestion?

[dgluhotorenko]

I suspect that the problem happens due to the lack of bootstrap 4. When I remove classes on buttons they starts show as it should be.

[jfroment]

It seems indeed caused by the lack of bootstrap 4. A workaround is to replace "float-right" / "float-left" classes by "pull-right" / "pull-left", and to replace the [hidden] attributes by *ngIf (you will have to invert the condition on each button). Strangely, the [hidden] attribute does not work for Bootstrap3.

[pgusic]

This can be a quick fix:

[hidden] { display: none !important; }

.card-footer { display: flex; justify-content: space-between; }

[l0gicgates]

+1 for jfroment comment. *ngIf would probably be better since it will not add a "display:none" to the element but it actually remove it from the DOM completely. @pgusic The reason why the [hidden] attribute is not working is because the card footer has a different display attribute (flex) and that one takes precendence over the [hidden] one. I am assuming that's why you overrode the style and added the important property.

[jdell64]

A long term suggestion would be to remove the bootstrap dependency and allow for custom classes to be assigned to the different components.

[pgusic]

@l0gicgates Attribute selector [hidden] is for the buttons, to fix the "Next" button appearing on the last step, and "Done" appearing on all of the steps, I should have made it more specific to be clear. The flex on .card-footer is just to add space between them.