Estructura de un componente Angular

Los componentes Angular de WCF están generados automáticamente por un algoritmo, pero el código, la estructura y la presentación tienen la intención deliberada de ser fácilmente comprensible por un programador con cierta experiencia en Angluar.

Están diseñados algorítmicamente para mantener un código limpio, estructurado y altamente reactivo. Utilizan en toda su arquitectura las características nativas de Angular 17.2+ (Signals), facilitando al programador el manejo de estados de manera predecible y eficiente.

La estructura es estándar y sigue los lineamientos clásicos de angular. Todo el código está contenido en el archivo nombre-del-componente.components.ts. Se describen a continuación los principales elementos que la integran.

Imports

Como en cualquier componente Angular, la primera parte del código, tiene las sentencias que importan los módulos necesarios para el funcionamiento.

Primero los del core de Reactividad de Angular (como model, computed, y effect), luego aquellas que se necesitan para el servicio WcfSubcomps, el soporte integrador de formularios reactivos (ReactiveFormsModule) en el caso de que el componente lo requiera, y por último el de los subcomponentes, si existieran.

Decorador @Component

El decorador @Component incluye los elementos necesarios para que el componente sea creado y pueda ser incluido en la aplicación:

• selector: el selector es siempre comp-nombre-del-componente. Agrega el prefijo comp- porque el estandar HTML exige que los elementos creados por el usuario (custom) tengan siempre un guion en el nombre, para diferenciarlos de los estándar como h1, div o span. De esta forma se evitan los problemas con los componentes que tienen una sola palabra en el nombre.
• standalone: todos los componentes Angular generados por WCF importan todo lo que necesitan y por lo tanto pueden ser usados libremente en la aplicación, sin depender de ningún módulo. Eso se declara en este atributo del decorador.
• imports: los módulos que importa y utiliza el componente, incluyendo los subcomponentes.
• host: enlaza propiedades al elemento DOM contenedor nativo. Por ejemplo, "[id]": "id()" expone el id dinámico al componente nativo de cara a simplificar la cascada CSS y directivas.
• providers: si el componente implementa campos se registra aquí el NG_VALUE_ACCESSOR para enlazarse de manera resolutiva a los formularios de Angular.
• templateUrl y styleUrl: los vínculos hacia los archivos que contienen el diseño HTML y CSS del componente.

Export class

La parte final de la estructura del componente incluye la clase exportable. El nombre de la clase es siempre el nombre del componente escrito en notación camello (camel case) comenzando con mayúsculas (UpperCamelCase) tal como es el estándar de Angular.

El código de la clase declara en primer lugar sus propiedades bidireccionales a través de model(). Algunos parámetros, como el id y modificadores predeterminados, se incluyen en todos los componentes WCF, seguidos por los inputs particulares del componente.

A estas declaraciones les sigue la inyección del servicio WcfSubcomps. El componente crea una variable computada (computed signal) que observa el diccionario global de este servicio en busca continua de atributos que coincidan exactamente con su propio id en ejecución. Signals garantiza que esta búsqueda consuma una cantidad de recursos mínima y se realice con una performance adecuada.

El procesamiento sincrónico recae sobre la función nativa de efecto concurrente: effect(). Este bloque reacciona automáticamente atendiendo la inyección de WcfSubcomps y tiene una lógica precisa: al interceptar los atributos filtrados, asigna de inmediato sus valores a los modelos internos encerrando sus evaluaciones primarias en un bloque untracked(). Esta práctica garantiza el desempeño cancelando ciclos reactivos que podrían generar bucles infinitos.

HTML

El HTML del componente está incluido completamente en el archivo nombre-del-coponente.component.html. Incluye los bindings y variables (expresadas reactivamente, por ejemplo, {{ id() }} ) que permiten que el componente tenga el comportamiento esperado en tiempo de ejecución.

En la estructura del HTML se utiliza un sangrado de textos (indenting) en el que cada atributo de un tag ocupa un renglón. Esto permite una visualización sencilla de qué atributos e inputs aplica a cada tag, que variables están vinculadas por medio de bindings y cómo cambiará el componente cuando cambie su valor.

El HTML se genera automáticamente al generar el componente en la fábrica, y se sobrescribe en cada generación, por lo que está recomendado no agregar o modificar el código.

CSS

Todo el CSS del componente está incluido completamente en el archivo nombre-del-componente.component.css. Es un archivo clásico de CSS, que comienza con los fonts que se utilizan en el componente y luego las clases de los distintos elementos que lo integran.

En el caso de que en la Fábrica de WCF se haya incluido código CSS adicional (custom CSS) este código se incluye a continuación de la última clase. Cada vez que se modifica el componente se regenera el código CSS, por lo que no se recomienda modificarlo o añadir código utilizando otro método que el custom CSS de la Fábrica de WCF.