Topic: Angular Stepper. First step shows up closed.

pvarela free asked 3 years ago


Hello, on the following code:

<mdb-stepper #stepper [vertical]="true">
                <mdb-step name="Step 1" label="Type something">
                    <p>Some Text 2</p>
                    <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
                </mdb-step>
                <mdb-step name="Step 2">
                    <p>Some Text 2</p>
                    <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
                    <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
                </mdb-step>
                <mdb-step name="Step 3" label="Step 3 label">
                    <p>Some Text 3</p>
                    <div class="step-actions">
                        <button mdbBtn size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
                    </div>
                </mdb-step>
            </mdb-stepper>

I cannot get the STEP 1 to show up opened. I need to click on STEP 1 to open it and show the content.

How do I set the STEP 1 to be opened by default?!

Thanks.


Arkadiusz Idzikowski staff commented 3 years ago

We tested this code on our end and it worked correctly, the first step is open by default. Are there any errors in the console when you use the stepper component in your app?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: Mac
  • Browser: Safari
  • OS: Catalina
  • Provided sample code: No
  • Provided link: No