2 thoughts on “Cannot programmatically select tab.”

  1. The problem is that you are calling the select method wayyyy too early (that is, before tabs are built). We should improve the error message but we can’t make it “work” the way you expect (tabs are fully initialized only in the ngAfterViewInit hook but at this point you can’t mutate model as it would break uni-directional data flow).

    The god news, though, that you can use the activeId property of the tabset itself to sepcify a tab to be initially selected: http://plnkr.co/edit/zlM7lxFc1mnpbf2JtEvF?p=preview – would this be sufficient for your use-case?

  2. @pkozlowski-opensource It not work when I use ngFor in ng-tab
    Here is the code(I use Pug to generate HTML):

    ngb-tabset(#t="ngbTabset")
    ngb-tab(*ngFor="let item of data" id="{{item.value}}")
        template(ngbTabTitle)
            a([routerLink]='["../", item.value]' routerLinkActive='active' innerHTML="{{item.name}}") 
        template(ngbTabContent) {{item.value}}

    and the component.ts:

    export class AppComponent implements AfterViewInit{
    @ViewChild('t') ngbTabSet;    
    ngAfterViewInit() {
        console.log('view init..');
        this.route.params
            .subscribe((params: Params) => {
                console.log(params);
                //it's length was 0 at first
                this.ngbTabSet.select(params['system']);
            })
    }
}

    The length of ngTabSet is 0 at first. So you cannot select the specific tab.

    Is there any way to solve this problem? Thanks a lot.