How to programmatically set selected index in Nebular nb-stepper?

Question

I am experimenting with the nb-stepper component, and would like to set the selectedIndex in my angular component. When specifying two-way binding on [(selectedIndex)] after refreshing my activities, the nb-step is not updated to show the selected step.

In my component, I have added an Input() for selectedActivityIndex, which updates the nb-stepper if I set this value in ngOnInit(). But later, after getting a new list of activities, I seem unable to inform the stepper of a new selectedIndex.

activities.html

<nb-stepper orientation="vertical" disableStepNavigation="true" [(selectedIndex)]="selectedActivityIndex">
    <nb-step *ngFor="let activity of activities" 
        [label]="activity.name" 
        [completed]="activity.completed"
        ></nb-step>
</nb-stepper>

activities.component.ts

export class ActivitiesComponent {

    private _selectedActivityIndex: number;
    @Output() onSelectedActivityIndexChange = new EventEmitter();

    @Input()
    get selectedActivityIndex() {
      return this._selectedActivityIndex;
    }

    set selectedActivityIndex(val) {
      this._selectedActivityIndex = val;
      this.onSelectedActivityIndexChange.emit(this.selectedActivityIndex);
    }

    constructor(private activitiesService: ActivitiesService) { 
      this.activities = []
    }

    ngOnInit() {
      this.selectedActivityIndex = 0

      this.activitiesService.getActivities()
        .subscribe(data => { 
          if(data['statusCode'] == 200) {
            this.activities = data['activities'];
            this.selectedActivityIndex = this.activities.map(m => { return m.selected; }).indexOf(true, 0) 
        }
        else
          console.log('Failure to get activities: ' + data['statusCode'])
    });
    }

I would expect the selectedIndex to be updated to the value specified in the JSON response returned by the service, in fact even setting this.selectedActivityIndex = 1 in subscribe does not work.

score 0 · Answer 1 · answered Jun 15 '19 at 16:21

For posterity, ultimately this came down to timing when using an observable. My initial problem was that I pushed a new list to the client with a map of which item should be selected. This causes the nb-stepper to rebind, and setting the selectedActivityIndex occurred too soon. Rather, I initialize the component once, then after the bind, proceed to set the index.

  private getActivities() {
    if (this.selectedFailoverGroup && this.selectedTargetRegion) {
      this.activitiesService.getActivities(this.selectedFailoverGroup)
        .subscribe((d1, t1 = this) => {
          if(d1['statusCode'] == 200) {
            console.log('FailoverComponent.getActivities - data: %s', JSON.stringify(d1));
            t1.activities = d1['activities'];
            t1.activitiesService.getCompletedActivities(t1.selectedFailoverGroup)
              .subscribe((d2) => {
                console.log('FailoverComponent.getCompletedActivities - data: %s', JSON.stringify(d2));
                for (let a of t1.activities) {
                  a.completed = (d2['activities'].map(b => { return b.name == a.name }).indexOf(true, 0) > -1 );
                }
              });
          }
          else {
            t1.activities = [];
          }
      }, (error) => {
        console.error(error)
      }, () => {
        this.activitiesService.getCurrentActivity(this.selectedFailoverGroup)
          .subscribe((d1, t1 = this) => {
            if(d1['statusCode'] == 200) {
              console.log('FailoverComponent.getCurrentActivity - data: %s', JSON.stringify(d1));
              t1.selectedActivityIndex = t1.activities.map(a => { return a.name == d1['name']}).indexOf(true, 0);
            }
            else {
              t1.activities = [];
            }
          })
      });
    } else {
      this.activities = [];
    }
  }

      this._hubConnection.on("notifyErrorActivity", (errorActivity: string, t1 = this) => {
        console.log('FailoverComponent.completedActivities - message: %s', JSON.stringify(errorActivity))
        if (errorActivity != null) {
          t1.selectedAcitivtyStyle = { 'background-color': '#FF4C6A' }
        }
      });

            <nb-stepper
              orientation="vertical"
              disableStepNavigation="true"
              [(selectedIndex)]="selectedActivityIndex"
              style="min-height: 800px;"
              >
              <nb-step *ngFor="let activity of activities"
                [completed]="activity.completed"
                [label]="activity.name"
                >
              </nb-step>
            </nb-stepper>

How to programmatically set selected index in Nebular nb-stepper?

1 Answers1