0

Tengo un problema con realizar esta acción:

Gif

Busco que el click se haga tras realizar una serie de pasos de forma automática, es decir simular el click que debería hacer el usuario.

Lo que he intentado es lo siguiente, pero no me funciona:

<mat-tab-group>
 <mat-tab id="listaODs" label="Lista de Órdenes">
  <div class="row">    
   <div class="col-md-12">
    <mat-table class="mat-table__wrapper" [dataSource]="listOrdenesDespacho" 
     #MatSort="matSort" matSort perfectScrollbar>
    <!-- ... -->
const input = document.getElementById("listaODs") as HTMLInputElement | null 
input.click()

2 respuestas 2

1

Hola no se si te refieres que cuando se realice el click, se dispare un evento, si es eso lo que necesitas puedes probar el siguiente código

<mat-tab-group (selectedTabChange)="tabActive($event)" [selectedIndex]="selectedIndex">
 <mat-tab id="listaODs" label="Lista de Órdenes">
  <div class="row">    
   <div class="col-md-12">
    <mat-table class="mat-table__wrapper" [dataSource]="listOrdenesDespacho" 
     #MatSort="matSort" matSort perfectScrollbar>
    <!-- ... -->

y en el archivo .ts

export class NameComponent {
   public selectedIndex = 0;
   
   constructor() {}
   
   tabActive(event) {
      // obtenemos el index del tab
      console.log(event.index);
      // actualizamos el index seleccionado
      this.selectedIndex = event.index;
    }
}
1
  • No fue la resolución, pero si me ayudó a solventar mi duda. Gracias!
    – lsanchezo
    el 10 oct. 2022 a las 20:07
0

Antes que todo, creo que no dejé en claro cuál era el requerimiento; el tema es que tras realizar una serie de pasos mi objetivo era que se haga un click de forma automática para regresar al tab anterior.

La solución fue hacer uso de @ViewChild, dejando así el código:

Component:

export class SaveUpdateOrdenDespachoComponent implements OnInit {
// ...
@ViewChild('tabGroup', {static: false}) tab: MatTabGroup;
this.tab.selectedIndex = 0; // dependiendo del índice de mat-tab-group
// ...
} 

HTML:

<mat-tab-group #tabGroup>
<mat-tab label="Lista de Órdenes">
<div>
<!-- ... -->

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.