Angular: cómo abrir una pestaña Bootstrap mediante programación

En una aplicación anterior, necesitaba abrir un modal mediante programación. Este es un código parcial del modal:

<div class="modal fade" id="messageModal" tabindex="-1" role="dialog"></div>

Este es el enlace HTML que se invoca desde el componente para abrir el modal anterior:

<ng-container class="hidden">
   <a #openMessage id="open-message" data-toggle="modal" data-target="#messageModal">
   </a>
</ng-container>

Y este es el código del componente utilizado para invocar el enlace anterior:

@ViewChild('openMessage', { static: true })
   openMessage: ElementRef<HTMLElement>;

private openModal() {
    let elementModal: HTMLElement = this.openMessage.nativeElement;
    elementModal.click();
}

Estoy intentando utilizar el mismo proceso para abrir una pestaña Bootstrap. Esta es la pestaña de destino que se abrirá:

<a _ngcontent-ng-c4138276234="" role="tab" data-bs-toggle="tab" 
  class="nav-link ingredients active" href="#tab-10" aria-selected="true">
  <strong _ngcontent-ng-c4138276234="">Ingredients</strong>
</a>

Este es el enlace HTML que se invoca desde el componente para abrir la pestaña anterior:

<ng-container class="hidden">
  <a #openTab id="tabclicker"
    class="nav-link ingredients"
    role="tab"
    data-bs-toggle="tab"    
    data-target="#tab-10"
></a>

Y esta es la función del componente para invocar la apertura de la pestaña:

@ViewChild('openTab', { static: true }) 
   openTab: ElementRef<HTMLElement>;

private openTab() {
   let elementTab: HTMLElement = this.openTab.nativeElement;
    console.log('elementTab', elementTab);
   elementTab.click();
}  

El caso de abrir el modal funcionó pero en el caso de la pestaña me sale el siguiente error:

TypeError no detectado: 'querySelectorAll' llamó a un objeto que no implementa el elemento de interfaz.

¿Alguna idea de cómo implementar esto?

Feb 16 '24 00:02 koque