How can I bind my route to a stepper in angular-material2?

Question

I'm using the Stepper component of angular-material2 and I want the steps to be reflected in the URL route of my application, so that the users can share the URL links and get immediately to a proper step. Is it possible?

Answer 1

You need to inject and use Location service from '@angular/common' :

1) To change the URL call go function of Location service. Example:

if (this.stepper.selected.label === 'subscriber') { 
    this.location.go('./enrollment/subscriberInfo');
}

2) To change the stepper after URL change call subscriber function of Location service. Example:

this.location.subscribe( () => {
    if (this.location.isCurrentPathEqualTo('/enrollment/subscriberInfo')) {
        this.stepper.selectedIndex = 0;
    }
    if (this.location.isCurrentPathEqualTo('/enrollment/payment')) {
        this.stepper.selectedIndex = 1;
    } 
    if (this.location.isCurrentPathEqualTo('/enrollment/agreement')) {
        this.stepper.selectedIndex = 2;
    }
});`

FYI, I used @Output() animationDone: EventEmitter<void> of stepper to change URL.