Expected behavior

i am using the mdb angular linear stepper for a shop wizard.the stepper contains 5 steps

i am using ngIf to decide if its necessary to display step 4.if the user loggedin sucessfully in step 3, then i set the loggedin variable.

Actual behavior

the stepper is reduced visually and step 5 is shown, but it is not marked (highlighted) in the bar.

Resources (screenshots, code snippets etc.)

mystepper.html

  <mdb-stepper #teststepper>
<mdb-step name="Step 1">
 <h3>Step 1</h3>
</mdb-step>
<mdb-step name="Step 2">
  <h3>Step 2</h3>
</mdb-step>
<mdb-step name="Step 3">
  <h3>Step 3</h3>
  <button mdbBtn size="sm" color="primary" (click)="simulatelogin()">simulate Login</button>
</mdb-step>
<mdb-step name="Step 4" label="Step 4 label" *ngIf="!loggedin">
  <h3>Step 4</h3>
</mdb-step>
<mdb-step name="Step 5" label="Step 5 label">
  <h3>Step 5</h3>
  <div class="step-actions">
    <button mdbBtn  size="sm" color="primary" (click)="onSubmit1()">SUBMIT</button>
  </div>
</mdb-step>

mystepper.ts

@ViewChild('teststepper') teststepper: any;

loggedin:boolean = false;

simulatelogin() {
        console.log('teststepper orig stepcount:'+this.teststepper.steps.length);
        console.log('teststepper orig current step:'+this.teststepper._activeStepIndex);
        this.loggedin = true;
        this.teststepper.setNewActiveStep(3);
        console.log('teststepper new stepcount:'+this.teststepper.steps.length);
        console.log('teststepper new current step:'+this.teststepper._activeStepIndex);
  }

 onSubmit1() {
   console.log('pressed on submit');
 }

output:

teststepper orig stepcount:5

teststepper orig current step:2

teststepper new stepcount:5

teststepper new current step:3

is it possible to remove steps and then jump to the new index.I thought that this is a common workflow of a buying wizard (to skip steps if the user already has an account).

Thomas