Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ngbTabset] not set the activeId on a default item

See original GitHub issue

Bug description:

i’m trying to set the default active element on ngbTabset to have a list without a selected item, but the activeId is setted by default on the first element.

Version of Angular, ng-bootstrap, and Bootstrap:

HTML :

<ngb-tabset>
        <ngb-tab *ngFor="let item of _onlineFormList; let i=index" id="tab{{i}}">
          <ng-template ngbTabTitle>
            <div (click)="getFormContent(item.id)">
              <span>{{item.title}}</span>
            </div>
          </ng-template>
          <ng-template ngbTabContent>
           //
          </ng-template>
</ngb-tabset>

Angular: Angular 5

ng-bootstrap: 1.0.0-beta.3

Issue Analytics

State:
Created 6 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

pkozlowski-opensourcecommented, Mar 22, 2018

Closing as we haven’t heard back

0reactions

gauribanecommented, Nov 28, 2019

demonstrating the functionality. https://stackblitz.com/edit/angular-ettpha?embed=1&file=app/tabset-basic.ts

Top Results From Across the Web

Ngb-tabset by default selects tab 1 when the [activeId] passed ...

It's only set the tab to active if you don't provide any activeId. ... in the navItem list, if it's not, set it...

Nav - Angular powered Bootstrap

Default value: - — initialized from NgbNavConfig service ... This event won't be emitted if nav is changed programmatically via [activeId] or .select()...

Angular 8/7 Bootstrap | Tabset Tutorial with Options by Example

The ngb-tabset is the main wrapper for Tabset tabs. Input Properties. activeId: Id of the tab to be active/opened. destroyOnHide: Default is ...

Dynamic tabs with Angular 6+ and ng-bootstrap

If a menu item is clicked and a tab with this component already exist, ... Bind the activeTabUrl variable to the activeId of...

Upgrading to Angular 11 - IBM

<ngb-tabset type="pills" (tabChange)="onTabChange($event)" [activeId]="activeTab"> <ngb-tab id="product"> <ng-template ngbTabTitle> <div id="product" ...