Como Crear Pestañas (Tabs) con Angular y Material Design – Parte 1

4 minuto(s)

Demo

En ocasiones necesitamos crear pestaña o tabs en nuestro proyecto creado con Angular. Estas pestañas permite distribuir el contenido de manera más profesional generando una buena experiencia en los usuarios. Personalmente me ha sido útil cuando tengo una vista con mucho contenido y quiero que el usuario encuentre toda la información en una sola pestaña sin necesidad que tenga que bajar más para encontra lo que necesita. En este Post te enseñare a Como Crear Pestañas (Tabs) con Angular y Material Design, vamos con ello.

Partes 1

  • Parte 1
  • Parte 2 (Final – Código Fuente GitHub)

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Como Mantenerte Motivado Para Seguir Programando” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast):

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear Pestañas (Tabs) con Angular y Material Design – Parte 1.

Creación de Nuevo Proyecto

En mi consola de comandos ejecuto el siguiente comando para crear un nuevo proyecto, luego ingreso al directorio del proyecto y arranco el servidor:


Abro la ruta http://localhost:4200/ en el navegador y confirmo que el proyecto se ha creado correctamente:

Angular me ha creado la siguiente estructura de directorios y archivos para mi proyecto:

Instalación de Angular Material

Para usar Material Design, usaré el paquete @angular/material, lo instalo ejecutando el siguiente comando:


Listo más adelante le daremos un buen uso.

Ahora pasemos a trabajar en los principales archivos del componente principal AppComponent:

Componente Principal AppComponent

Abro el archivo app.component.html y borro su contenido y agrego el siguiente contenido:


Ahora abro el archivo app.module.ts y agrego el siguiente contenido:


También abro el archivo app.component.ts y agrego el siguiente contenido:


Eso es todo, he editado los archivos app.component.html, app.module.ts y app.component.ts

Hasta aquí llegamos con esta primera parte del tutorial en donde hemos creado un proyecto nuevo con Angular, hemos instalado Angular Material y otras tareas más.

Ten Paciencia, lo que quiero es que conozcas bien estas librerías y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte y última, terminaremos de crear nuestro proyecto.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.