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
    Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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