init stepper from parameters of the URL

Question

I want to initialize the index of my stepper against the parameter in the URL.

I recover the parameter well but my stepper is not displayed.

My url : http://localhost/toto?stepNumber=0

My code :

stepNumber: Observable<number>;
ngOnInit() {
    this.stepNumber = this.route.queryParams.map(param => param.stepNumber);
    this.stepNumber.subscribe(stepNumber => {
        this.stepper.selectedIndex = stepNumber;
    })

}

the stepper works with this code :

ngOnInit() {
    this.stepper.selectedIndex = 1;
}

I think it's the observable problem

Code for display :

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step [stepControl]="nameForm" label="Give it a name!">
    <form [formGroup]="nameForm">
      <mat-form-field>
        <input matInput placeholder="Resource's name" formControlName="name">
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Summon</button>
      </div>
    </form>
  </mat-step>
  <mat-step label="Summoning" [completed]="isComplete()"  [editable]="false">
      <div fxLayout="column" fxLayoutAlign="center center" style="margin-top: 24px">
          <mat-spinner></mat-spinner>
          <h2>{{STATUS_LABEL[status]}}</h2>
      </div>
  </mat-step>
  <mat-step label="Result" [editable]="false">
    <div *ngIf="status === 'SUCCESS'" fxLayout="column" fxLayoutAlign="center center" style="margin-top: 24px">
        <span class="img alive"></span>
    </div>
    <h2 *ngIf="status === 'FAILURE'">That resource warped into the void :(</h2>
  </mat-step>
</mat-horizontal-stepper>