How do I select the NgbTabset tab as active on boot?
The "Select Active Tab By ID" example at https://ng-bootstrap.github.io/#/components/tabs shows how to use the DOM button to programmatically select an Angular Bootstrap active tab. But how do you configure a tab to be active from TypeScript code, for example by referencing some persistent state of which tab was last opened in that view using a service that saved that state?
The activeId documentation on this page explains how to hard-code a tab to be active, but I need to programmatically set the tab selection. I can set the tab using [activeId] = getActiveId () (where getActiveId () accesses the service where I can store the value of the tab), but this runs into all sorts of problems when the activeId is set, which is probably why in the documentation it says "Use the 'select' method to programmatically switch tabs."
Following this direction, I tried to use select in ngb-tabset and use the html onload event to solve this problem in the DOM, but it was not clear where to place the onload and I couldn't get it to work.
I tried to use ngOnInit in TypeScript to set the DOM state, but couldn't figure out how to access ngb-tabset.
How to properly coordinate between TypeScript and DOM to select the NgbTabset as active on load?
source to share
I figured out how to get this to work, but I am undecided if this is a tricky workaround or an elegant solution.
I ended up going against the advice at https://ng-bootstrap.github.io/#/components/tabs/api which said "Use the 'selection method' to switch tab programmatically." I used activeId, with main code:
<ngb-tabset [activeId]="activeIdString">
[activeId] is bound to the variable activeIdString, not the method described in the original post (using the getActiveId () method instead of a variable results in an error message "The expression changed after it was checked"), which although the error is only in mode development as described at https://github.com/angular/angular/issues/6005 is still a problem.)
The activeIdString variable is set when the component is initialized:
ngOnInit(): void {
this.activeIdString = this.tabNameString[this.personService.getNextTab()];
}
Since this code is on a tabbed component, I write the MostRecentTab for that component and convert it to nextTab on the navigation component before moving on to the tabbed component, eliminating the need to pay attention to exactly when ngOnInit is executed in relation to when I am recording MostRecentTab.
The discussion "Can't programmatically select tab" at https://github.com/ng-bootstrap/ng-bootstrap/issues/1016 also suggests using activeId, so I feel a little bit confident that I won't take the recommendation from https: // ng-bootstrap.github.io/#/components/tabs/api "Use select method to programmatically switch tabs."
source to share
I just finished this thing with an ngb chord.
The accordion looks like this:
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" [closeOthers]="true">
<ngb-panel id="static-1" title="First panel">
<ng-template ngbPanelTitle>
<button type="button" class="btn" data-toggle="button">
Tab One
</button>
</ng-template>
<ng-template ngbPanelContent>
Tab One Content
</ng-template>
</ngb-panel>
<ngb-panel id="static-2" title="Second">
<ng-template ngbPanelTitle>
<button type="button" class="btn" data-toggle="button">
Tab Two
</button>
</ng-template>
<ng-template ngbPanelContent>
Tab Two Content
</ng-template>
</ngb-panel>
</ngb-accordion>
I have set the tab I want to display in public service (stateSvc) as observable and then subscribe to it in my component, so when I go from the form and want to go back to the User Management tab for example I set stateSrv.this .currentAccordianTab = 'users-manage' and then navigate to the component using a consonant.
@ViewChild gives a link to the ngb harmonics in the template under the template link (#acc)
In my class I have this:
@ViewChild('acc') acc;
currentAccordianTab: string;
ngAfterContentInit() {
this.stateSvc.currentTab$
.subscribe(response => {
this.currentAccordianTab = response;
if (this.currentAccordianTab = 'users-manage') {
this.acc.toggle('static-2');
} else {
this.acc.toggle('static-1');
}
});
}
The ngb harmonic uses a toggle method that takes a tab-id parameter to set the current tab. I am assuming the select method is the ngb-tabset equivalent, but you can check the API doc.
Basically we get a reference to ngb-accordian with @ViewChild and then call its toggle function this.acc.toggle('static-2');
to set the state to the properly visible tab.
source to share
According to the docs , you need to use the select method . To do this, first add the id for the tabset to your HTML view file:
<ngb-tabset #tabset="ngbTabset">
In your .ts file, declare your ViewChild:
@ViewChild('tabset') tabset;
And then just use the method like this:
this.tabset.select(YOUR_TAB_ID_HERE);
PS: Althought @Mickey Segal's solution can work most of the time, I've seen in my projects that sometimes it doesn't work, so I suggest using the documented way of changing the active tab.
source to share