Programmatically navigation

[roydekleijn]

Hello,

I want to programmatically navigate to the next step of the wizard. (eventually, I like to do that with query parameters, but first things first)

Template:

<aw-wizard #wizard [navBarLayout]="'large-filled-symbols'">

In this template I have code to navigate to the next page.

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
  styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {

  @ViewChild('wizard') wizard: WizardComponent;

  constructor() {
  }

  next(): void {
    this.wizard.goToStep(2);
  }

}

When pressing the button, nothing happens. I use version 7.0.0

How can I programmatically navigate to the next step ?

I printed the wizard object:

[roydekleijn]

omg, I didn't notice before... but it's a zero based index :) sorry!

[roydekleijn]

One more thing,

If I call this code in the ngOnInit:

this.wizard.navigation.goToStep(this.wizard, 1);

Then I get this error:

ERROR TypeError: Cannot read property 'navigation' of undefined

How can I solve this one ?

If I implement the code in ngAfterViewInit, then I get:

core.js:6456 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'exit' of null
TypeError: Cannot read property 'exit' of null

[madoar]

Do you have a short example project showcasing the issue? This would help me tremendously finding the reason for the issue :)

[roydekleijn]

Awesome, defaultStepIndex helped me!