Tu primer Componente Angular

AngularDex (I)

En este artículo pondremos en práctica lo aprendido en el módulo de Componentes:
- ¿Qué son los componentes en Angular y cómo se crean?
- Comunicación entre Componentes en Angular: Estrategias para Compartir Datos y Eventos

Debemos desarrollar un componente que por cada pokemon se visualicen los siguientes atributos:

• Imagen del pokemon
• Identificador en la Pokédex
• Nombre
• Tipos

Además, queremos que al hacer clic sobre su imagen nos redirija a otra página con información más detallada del Pokémon.

Bulbasaur

Protip: como desarrollador debes familizarte a realizar la toma de requisitos, es decir, llevar a cabo un proceso de recopilación, análisis y comprensión de las necesidades y expectativas de los usuarios y stakeholders para un proyecto de desarrollo de software. Es el paso inicial y crucial en la planificación y diseño de cualquier proyecto, ya que sienta las bases para el desarrollo y entrega exitosa del producto.

Una vez tenemos claro el requisitos, vamos manos a la obra. Lo primero es crear el componente PokemonCard.

ng g c pokemon-card

Te recomiendo que intentes por ti mismo crear la estructura básica HTML para este componente. Yo te propongo la siguiente solución:

pokemon-card.compotent.html maquetación estática

pokemon-card.compotent.scss maquetación básica

Recuerda que tienes a tu disposición el repositorio github de este proyecto. Tienes varias ramas que he ido creando según el módulo en el que se codificó.

El cual nos da el siguiente resultado:

pokemon-card.compotent.html bulbasaur

Muy bien, pero como te has dado cuenta nuestro componente carece de dinamismo, es decir, no podemos parametrizar la información del Pokémon. Vamos a arregarlo.

Esto bajo el punto de vista de la Programación Orientada a Objetos, podemos decir que un Pokémon tiene los siguientes atributos:

imageUrl: string
id: number
name: string
types: PoketymonType[]

Para implementarlo te recomiendo que utilices el siguiente comando:

ng g i models/pokemon model

Esto nos creará la interfaz “Pokémon” dentro de la carpeta “models” (si no existe la crea), además, este archivo tendrá el sufijo “.model.ts”.

Protip: ¿Por qué utilizar una interfaz y una clase? Se recomienda utilizar interfaces como DTO cuando:
- El modelo no tiene lógica de negocio.
- Solamente se utiliza para transferir datos.
- No se instancia de manera frecuente.

pokemon.model.ts

Adicionalmente, también he creado un PokemonType que contendrá los diferentes tipos que puede tener un Pokémon.

Protip: En TypeScript, el uso de “types” es una característica clave que aporta beneficios significativos al desarrollo de software. Al utilizar tipos en TypeScript, podemos lograr mejorar la robustez del código limitando las opciones que acepta un método o una propiedad, además, esto también mejora el autocompletado y sugerencias de nuestro IDE.

Una vez definido el modelo, vamos a modificar nuestro pokemon-card.component.ts para que pueda recibir un Pokémon.

pokemon-card.component.ts

Ahora vamos a modificar nuestra plantilla HTML para reemplazar toda esa información “hardcodeada” por la información del input del componente.

pokemon-card.component.html

Protip: recordemos que Angular nos permite realizar “property binding” en la mayoría de atributos de elementos HTML, por ejemplo, el caso de “src” o “alt” de las etiquetas img. Si todo esto te suena a chino te recomiendo que revises el artículo Comunicación entre Componentes en Angular: Estrategias para Compartir Datos y Eventos

Permitidme no profundizar demasiado sobre la directiva ngFor, lo veremos en su respectiva clase, pero te puedo decir que no es más que un simple for each, pero adaptado a las plantillas HTML de Angular.

Perfecto, nuestro componente ahora es capaz de variar su contenido según sus inputs, pero ¿cómo le informamos un Pokémon? Vamos a verlo.

En el componente padre, en nuestro caso sería AppComponent, primero debemos instanciar nuestro Pokémon:

app.component.ts — instanciar pokemon

Y en su plantilla HTML “enlazamos” estas dos propiedades:

app.component.html — property binding

Ahora solo nos queda permitir que nuestro componente lance un evento cuando el usuario hace clic sobre la imagen del Pokémon, para ello podemos utilizar un Output:

pokemon-card.component.ts — click image output

En nuestra plantilla HTML, indicamos que cuando se haga clic sobre el elemento contenedor de la imagen invoque al método que se encarga de lanzar el clickImage al elemento padre:

pokemon-card.component.html — output binding

En el componente padre definimos el método que se ejecutará cuando se lance el evento clickImage:

app.component.ts

En el HTML del componente padre enlazamos el evento clickImage con el método anterior:

app.component.html

Si lo probamos y hacemos clic sobre la imagen de nuestro Pokémon deberíamos ver el siguiente resultado en la consola de nuestro navegador:

Console output

¡Espero que este artículo te haya brindado una comprensión sólida de la creación de componentes así como la comunicación entre ellos, incluyendo la interpolación de variables! Experimenta con ellas, crea tus propios componentes o modifica los creados y aprovecha al máximo el potencial de Angular para construir aplicaciones dinámicas y flexibles. ¡Happy Coding!