A lo largo y ancho del mundo de Angular2+, el componente es la principal entidad o bloque de construcción de aplicaciones Angular. Cada componente consiste en:
- Una plantilla HTML que declara lo que se representa en la página.
- Una clase TypeScript que define el comportamiento
- Un selector CSS que define cómo se utiliza el componente en una plantilla
- Opcionalmente, estilos CSS aplicados a la plantilla (sea css, scss, less).
Hasta aquí, es lo que nos enseña la propia web de Angular sobre componentes junto a más información como su ciclo de vida (lifecycle), entradas/salidas (Input, Output), y un largo etcétera.
Pero a parte de esta definición de lo que es y significa, vamos a conocer su tipología en función de varios puntos de vista (o por su diseño) publicados por diferentes medios. Este será un pequeño resumen de los tipos de componentes de Angular.
Jerarquía
Como sabes se organizan de forma jerárquica (como un árbol) dentro de la página de modo que encontramos:
| Nombre | Características |
|---|---|
| Root | Inicio o raíz de la jerarquía |
| Leaf | Último o final de la jerarquía |
| Parent | Tiene un Child |
| Child / Nested | Tiene un Parent |
Pueden darse diferentes combinaciones. Por ejemplo:
- Un componente root a la vez es parent si contiene algún componente child.
- Un componente leaf es también un componente child si tiene un parent.
- Un componente root puede ser a la vez un componente leaf si es el único componente.
Estado
Por estado nos referimos a los datos o propiedades que determinan el comportamiento y la representación de un componente en un momento determinado. El estado puede incluir entradas del usuario, datos leídos de alguna fuente de información (base de datos, cookies, localstorage, …) o cualquier variable que afecte la apariencia y la funcionalidad del componente.
| Nombre | Características |
|---|---|
| Stateful | Mantiene el estado |
| Stateless | No contiene estado |
Diseño por capas de la vista
Para qué lo vamos a utilizar o su funcionalidad dentro de la aplicación, es decir según su comportamiento dentro del diseño de la vista.
| Nombre | Características |
|---|---|
| Smart / Container / Impure | No solo depende de sus entradas, sino también de algún tipo de datos externos (fuera del ámbito del mismo), que no se pasan directamente a través de sus “input”. También puede producir algunos efectos secundarios que no se emiten a través de la salida “output”. |
| Presentational / Dumb / Pure | Es un componente que, para los datos recibidos (entradas), siempre se verá y se comportará de la misma manera, posiblemente también produzca otros datos (eventos, a través de salidas). |
Habitualmente los componentes “Presentational” suelen ser “Stateless”, pero puede mantener un pequeño estado mientras cumpla su funcionalidad “pure”.
Por entrada o «input» sería tanto por el decorador @Input() como por el signal input<unknown>();
Por salida u «output» sería tanto por el decorador @Output() como por el signal output<unknown>();
Otros
Podemos encontrar también estos otros tipos:
| Nombre | Características |
|---|---|
| Standalone | No necesita ser declarado en el módulo (ngModule). Activando la propiedad “standalone” del decorador @Component.@Component({ standalone: true }) |
| Generic | La clase typescript del componente define genéricos. Ejemplo:@Component({}) |
Links de interés:
https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why
https://jackthenomad.com/how-to-write-good-composable-and-pure-components-in-angular-2-1756945c0f5b
https://blog.angular-university.io/angular-standalone-components