Update Bootstrap tab from Angular component

Question

According to the bootstrap docs you can activate a tab programatically from JavaScript; for example:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show()

I want to be able to do this from an Angular component. What I have so far is this:

redirectTab(): void {
  const tab = document.querySelector(`#TabCtl button[data-bs-target="#nav-ett"]`);
  (window as any)["bootstrap"].Tab.getInstance(tab).show();
}

That (window as any)["bootstrap"] sticks out like a sore thumb; I'm sure there must be a better way to access bootstrap's APIs from Angular components.

This code doesn't work on first attempt and throws:

TypeError: Cannot read properties of null (reading 'show')

But if you click around the tabs and then try again, it works. Any ideas on a better way to do this?

Edit: ng-bootstrap is not the answer!

Ali Malek Mohammadi · Accepted Answer · 2022-09-10 12:07:29Z

1

There is a completely different approach to use packages like ng-bootstrap's nav or ngx-bootstrap tabs that offer a clean and out of the box solutions.

answered Sep 10, 2022 at 12:07

Ali Malek Mohammadi

827 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Layton Over a year ago

I meant to mention in the question that ng-bootstrap wasnt an option. It comes with it's own problems, and I find more often than not, it's a hassle to use.

stloc · Accepted Answer · 2023-11-17 11:19:18Z

0

simply triggerEl.click();

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
triggerEl.click();

answered Nov 17, 2023 at 11:19

stloc

1,5681 gold badge16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Update Bootstrap tab from Angular component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related