How to open nebular "stepper" depends on query params?

Question

I am trying to open nebular 'stepper' step, which depends on query params. For example: if route is /products/create?step=third shoud open third step

<nb-stepper [selected]="'second'">
  <nb-step [stepControl]="firstForm" [label]="first" #first>
   first
  </nb-step>
  <nb-step [label]="second" #second>
    second
  </nb-step>
  <nb-step [label]="third" #third>
    third
    <ng-template #third>Third step</ng-template>
  </nb-step>
</nb-stepper>

i have tried to use selected property, but it did not help

Answer 1

Get query params in your component and use that param to set selected step so in your compoenent

selectedStep='second';

constructor(activatedRoute:ActivatedRoute){
this.activatedRoute.queryParams.subscribe((data)=>{
if(data['step']){
this.selectedStep =data['step']
}
})
}

and in html

<nb-stepper [selected]="selectedStep">