Construct url step by step - Angular

Question

I'm trying to build a url step by step but I can not do it. I explain the situation: I realize an application for booking a coach online (step by step) with a angular material stepper.

Step 1: will be to go to myapp/booking/coachs url (for a list of coaches).

Step 2: grab the coach's id and add it to the url (myapp/booking/coachs/1).

Step 3: choose a date (myapp/booking/coachs/1/date/2018-07-13), then choose a time available -> (myapp/booking/coachs/1/date/2018-07-13/hour/9)

I can manage to get the id of the coach, etc., but I can not build the url step by step

Can someone guide me in the right direction to do that, please?

Your question is unclear. What do you mean by "build the url step by step" ? Maybe you could share a bit of code to let us understand what you've done so far. — n00dl3
– n00dl3, Commented Jul 13, 2018 at 10:05
Step by step, in the sense that when I select a coach, I go to step 2 and the url goes from myapp/booking/coach to myapp/booking/coach/2 Then when I select the date in step 2 the url goes to myapp/booking/coach/2/ date/2018-07-13. I will gradually add information in the url — Miguelit0
– Miguelit0, Commented Jul 13, 2018 at 10:09

christiaan · Accepted Answer · 2018-07-19 20:55:46Z

2

If you hookup the MatStepper to a FormGroup and then set the url based on the form's current value you can get the intended functionality:

  // setup controls
  coachIdControl = new FormControl(null, [Validators.required]);
  dateControl = new FormControl(null, [Validators.required]);

  formGroup = new FormGroup({
    coachId: this.coachIdControl,
    date: this.dateControl
  });

To bind the form to the url and vice versa you can:

// take values from the url and use to populate the form and set current step
// (you can also use queryMap to use /coach/:id/date/:date url)
// if the user refreshes the page, the form will repopulate from the query
this._route.queryParamMap.subscribe(query => {

  if(query.has('coachId') && this.coachIdControl.value !== query.get('coachId')){
    this.coachIdControl.setValue(query.get('coachId'));
    this.matStepper.selectedIndex = 1;
  }

  let date = moment.isMoment(this.dateControl.value) ? this.dateControl.value.format('YYYY-MM-DD') : null;

  if(query.has('date') && date !== query.get('date')){
    this.dateControl.setValue(query.get('date'));
    this.matStepper.selectedIndex = 2;
  }
  this.formGroup.updateValueAndValidity();
});

// if the form changes, update the query params in the url
this.formGroup.valueChanges.subscribe(value => {
  this._router.navigate(['.'], {queryParams: {
    coachId: value.coachId,
    date: moment.isMoment(value.date) ? value.date.format('YYYY-MM-DD') : null
  }});
});

The full example is here: StackBlitz - angular-material-routed-stepper

Update: Reset Steps

To remove url query values when stepping back you can listen for the selectionChange event and reset the values for steps that come after the selected step:

this.matStepper.selectionChange.subscribe((event: StepperSelectionEvent) => {


  switch(event.selectedIndex){
    case 0:
      this.dateControl.setValue(null);
    case 1:
      this.confirmControl.setValue(null);
  }

});

(Since the switch statements falls through, every step after the selected step will be reset.)

setValue will, in-turn, emit the valueChanges event which will update the url query.

The above Stackblitz is updated with this functionality.

edited Jul 19, 2018 at 20:55

answered Jul 13, 2018 at 12:04

christiaan

3883 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Miguelit0 Over a year ago

Wow, this is awesome, thank you so much , I could not hope better @christiaan

christiaan Over a year ago

This type of binding between the Router and FormGroup is useful for tables/indexes, stepped forms, etc. Glad I could help.

Miguelit0 Over a year ago

Hello @christiaan , I have another question. How I can reset the url on previous step ? If I'm on step 2 (booking?coachId=1&date=2018-07-02) and I'm going on step 1, I'd like to reset the date and have something like -> booking? CoachId = 1. Thank you !

lordchancellor · Accepted Answer · 2018-07-13 10:19:17Z

1

You could try adding a shared service to the components that can hold onto the URL and add to it as you go through each step. Something like this:

export class URLService {

  private URL: string[] = [];

  public addToURL(segment: string): void {
    this.URL = [ ...this.URL, segment ];
  }

  public retrieveURL(): string {
    return this.URL.join('/');
  }

}

So inject the URLService into any component you are using to build the URL and each time you have a new item to add, call urlService.addToURL('item'). Then when you are ready for your full URL, call urlService.retrieveURL() to get a string that you can use.

answered Jul 13, 2018 at 10:19

lordchancellor

4,1474 gold badges28 silver badges26 bronze badges

1 Comment

Miguelit0 Over a year ago

Thank you @lordchangellor, that's exactly what I was looking for!

Daniel Segura Pérez · Accepted Answer · 2018-07-13 10:20:21Z

1

I create a first version, but you should change the normal input text for calendar input on case of date and selector for coachs ID's:

https://stackblitz.com/angular/oyxooylkovag

cheers!

answered Jul 13, 2018 at 10:20

Daniel Segura Pérez

1,1278 silver badges12 bronze badges

1 Comment

Miguelit0 Over a year ago

Thank you @Daniel, this problem was secondary but it will help me to move forward :)

Collectives™ on Stack Overflow

Construct url step by step - Angular

3 Answers 3

Update: Reset Steps

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update: Reset Steps

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related