CODEWITHSUNDEEP
angularangular-material2
ganqqwerty
ganqqwerty

Reputation: 2004

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

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?

Upvotes: 4

Views: 3167

Answers (1)

Mohammad Behrouzifar
Mohammad Behrouzifar

Reputation: 66

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.

Upvotes: 4

Related Questions