¿Qué son los componentes en Angular y cómo se crean?

Componentes en Angular (I)

Photo by Terry Vlisidis on Unsplash

Los componentes son la base fundamental de las aplicaciones en Angular. Son bloques de construcción reutilizables y autónomos que encapsulan la lógica, la plantilla y los estilos de una parte específica de la interfaz de usuario. En este artículo, exploraremos qué son los componentes en Angular y cómo crearlos.

Photo by Kelly Sikkema on Unsplash

¿Qué son los Componentes en Angular?

En Angular, un componente es una combinación de una plantilla HTML, estilos CSS y lógica TypeScript. Representa una parte de la interfaz de usuario y puede tener su propio comportamiento y datos. Los componentes se utilizan para crear elementos visuales interactivos y reutilizables en una aplicación Angular. Dicho de otra manera, los componentes son los átomos de la aplicación.

Creación de un Componente en Angular

Aunque puedes crear manualmente cada uno de los archivos necesarios de un componente, no es para nada recomendable. Yo te recomiendo que utilices el CLI de Angular, para ello desde tu terminal escribe el siguiente comando:

ng generate component nombre-del-componente

Protip: existe una “sintaxis reducida” la cual nos permite ahorrarnos un par de letras, además, el nombre del componente también puede estar en TitleCase, por ejemplo la versión reducida del anterior comando sería el siguiente:
ng g c NombreDelComponente

Esto generará los archivos necesarios para el nuevo componente, incluyendo la plantilla HTML, los estilos CSS y el código TypeScript con su respectiva clase de Tests Unitarios. También declarará el componente en el módulo correspondiente.

Estructura de un Componente

ng g c my-component

Un componente en Angular consta de cuatro partes principales:

1. Plantilla HTML: Define la estructura y el diseño visual del componente utilizando HTML. Puedes incluir enlaces a propiedades y métodos del componente dentro de la plantilla para mostrar y manipular datos.
2. Estilos CSS: Proporciona los estilos visuales para el componente. Puedes utilizar CSS puro o aprovechar las características avanzadas de preprocesadores como Sass o Less.
3. Pruebas unitarias: Cuando utilizamos la CLI de angular por defecto nos genera un archivo *.spec.ts el cual contiene una implementación básica de los test unitarios.
4. Código TypeScript: Contiene la lógica del componente. Aquí puedes definir propiedades, métodos y eventos del componente. También puedes interactuar con servicios, realizar llamadas a APIs y mucho más.

Dentro del código TypeScript (*.component.ts) encontraremos la anotación @Component la cual se utiliza para decorar una clase y proporcionar metadatos sobre el componente, por defecto se definen las siguientes:

• selector: Especifica el selector CSS que se utilizará para identificar el componente en el HTML. Por ejemplo, si creamos el componente MyComponent` el selector por defecto es 'app-my-component', lo que significa que el componente se puede utilizar en el HTML utilizando la etiqueta <app-my-component>. Cabe destacar que, aunque podemos cambiar el selector, no es muy recomendable ya que rompe la consistencia y la nomenclatura que se recomienda seguir lo que podría confundir a los desarrolladores del proyecto.
• templateUrl: Especifica la ruta del archivo de plantilla HTML asociado al componente. En este caso, el archivo de plantilla se encuentra en './my-component.component.html'. Esta plantilla define la estructura y el contenido del componente en HTML.
• styleUrls: Especifica un array de rutas de archivos de estilos asociados al componente. En este caso, el archivo de estilos se encuentra en './my-component.component.scss'. Estos estilos se aplicarán al componente y pueden contener reglas CSS para personalizar la apariencia del componente.

Interpolación de variables

La interpolación de variables en Angular es una forma de mostrar dinámicamente el valor de una variable definida en el componente dentro de la plantilla del mismo componente. Permite vincular datos entre el componente y su interfaz de usuario de manera sencilla.

En la interpolación, se utilizan las dobles llaves {{ }} en la plantilla de Angular para indicar dónde se desea mostrar el valor de la variable. El contenido dentro de las llaves es una expresión que representa el nombre de la variable en el componente o incluso la invocación a un método.

Protip: aunque se puede invocar a un método desde las plantillas HTML, no suele ser recomendable debido a que se invoca en cada ciclo de detección de cambios de Angular. Esto puede generar una carga adicional en el rendimiento de la aplicación, especialmente si el método realiza operaciones costosas o realiza llamadas a servicios externos.

Por ejemplo, si tenemos una variable name en el componente:

export class MyComponentComponent {
  name = 'Rodrigo';
}

Podemos usar la interpolación para mostrar el valor de name en la plantilla del componente:

<div>
  ¡Hola, {{ name }}!
</div>

Cuando la plantilla se renderice, el texto mostrado será “¡Hola, Rodrigo!”. La interpolación de variables en Angular permite mantener actualizada la interfaz de usuario a medida que cambian los datos en el componente. Es una forma poderosa y sencilla de mostrar dinámicamente información en las plantillas de Angular.