Como hacer clic automatico en angular material tab + interval

Escrito por zEOCk hace hace 1 año

Compartir En redes Sociales

Facebook WhatsApp Youtube
angular-material-tab-interval-time

En este ejercicio veremos cómo podemos hacer para que el tab de Angular cambie automáticamente cada cierto tiempo, en este caso lo haremos cada 5 segundos pero puede editarse sin ningún problema al tiempo necesario.

Paso numero 1


Nos creamos un nuevo proyecto en angular, abrimos la terminal y ejecutamos el comando: 

ng n tabs

Paso numero 2 - Instalar Angular material


Para instalar Angular Material tenemos que irnos a la documentación oficial que está en la página:

Copiamos el comando para hacer su instalación directamente en la consola de la siguiente manera; 

ng add @angular/material
Una vez instalado nos vamos a la parte de componentes y buscamos "tabs" nos podemos en el área de "API" e importamos en el archivo app.module.ts: 

import {MatTabsModule} from '@angular/material/tabs';
  imports: [
    BrowserModule,
    NoopAnimationsModule,
    MatTabsModule //<--------
  ],

Paso numero 3 - Hacer uso del componente


Una vez que hemos importado el componente llego la hora de hacer uso de él, así que nos vamos al apartado de "OVERVIEW" "view code" y copiamos el que nos interesa y lo pegamos en nuestra témplate, también agregamos el selectedIndex como se muestra a continuación: 

<mat-tab-group mat-align-tabs="center" [(selectedIndex)]="seleccionado">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
El mat-align-tabs="center" es para que nos centre todo el grupo de tabs, y el selectedIndex es para obtener el índice de cual tab hemos seleccionado y ya con esto poder manipularlo en el archivo ts.

Paso número 4 - Agregar el código necesario en nuestro archivo component.ts


Importamos Interval, agregamos las variables y métodos necesarios y una vez cargada la página mandaremos llamar el método CincoSegundos en el ngOnInit, este tendrá un proceso de actualización para que el tabs se cambie de posición cada cierto tiempo, recuerden que cada 1000 se refiere a 1 segundo. 

import { interval } from 'rxjs';
  seleccionado: number = 0;
  ngOnInit() {
    this.CincoSegundos();
  }
  CincoSegundos() {
    const segundos = interval(5000);
    segundos.subscribe(() => {
      this.seleccionado++;
      if(this.seleccionado == 3){
        this.seleccionado = 0;
      }
    });
  }
En resumen lo que hace es iniciar iniciar en el primer tab y despues de 5 segundo se cambia solo al segundo y por ultimo al tercero, una vez que llega al ultimo, se regresa al primero y vuelve a comenzar.


Etiquetas:

Compartir En redes Sociales

Facebook WhatsApp Youtube
Generic placeholder image
Ing. Obed Sánchez

Gusto por las motos Harley Davidson, el rock n roll y la informática, creador de este blog para difusión del conocimiento libre, interesado en el mundo open source.

Suscribete al canal