Update Bootstrap tab from Angular component

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!