Нарисуйте только нижнюю часть диаграммы SVG

Если вы подключите MatStepper к FormGroup, а затем установите URL-адрес на основе текущего значения формы, вы можете получить предполагаемую функциональность:

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

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

Чтобы привязать форму к URL-адресу и, наоборот, вы можете:

// 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
  }});
});

Полный пример: StackBlitz - угловой материал-routed-stepper

Обновление: шаги сброса

Чтобы удалить значения запроса url при отступлении, вы можете прослушивать событие selectionChange и сбросить значения шагов, которые будут выполняться после выбранного шага:

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


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

});

(Поскольку переключатель заявления проваливаются, каждый шаг после того, как выбранный шаг будет сброшен.)

setValue, в свою очередь, испустит событие valueChanges, которое обновит запрос url.

Выше Stackblitz обновляется с этой функциональностью.