CODEWITHSUNDEEP
angularng-bootstrap
jonesy
jonesy

Reputation: 656

change ng bootstrap active tab after view initialised

Please see the following plunker

I want to be able to select a tab after the tabs have been rendered but I get an error ExpressionChangedAfterItHasBeenCheckedError. The scenario is on refresh of browser if this particular route has an ID value then load the entity and then select the detail tab. 

ngAfterViewInit() {
    let id = this.route.snapshot.params['id'];
    if(null!=id) {
      this.loadEntity(id);
      this.tabs.select('detail');
    }
  }

Upvotes: 1

Views: 688

Answers (1)

jonesy
jonesy

Reputation: 656

I solved this by having a variable selected tab in the component and then setting the activeId of the tabs to this variable. 

<ngb-tabset [activeId]="selectedTab">

In the onInit of the component I then just set this selectedTab variable to the detail tab if the route contains an ID...

let id = this.route.snapshot.params['id'];
if(null!=id) {
  this.loadEntity(id);
  this.selectedTab = 'detail';
}

Upvotes: 1

Related Questions