Los componentes que genera Web Component Factory utilizan Angular Signals, y proveen Inputs que pueden ser actualizados tanto en el template como a través del código. También se puede utilizar el servicio WcfSubcomps para modificarlos.
Todos los textos, imágenes, vínculos, place holders, @for, select y radios, así como sus etiquetas, incluidos en un componente son Inputs y por tanto se pueden modificar.
Se describe a continuación cada uno de ellos.
Text Inputs
Los Text Inputs incluyen todos los inputs Angular de tipo string, es decir, que su contenido es siempre un texto. Hay varios tipos de Text Inputs:
- Texto: su contenido se refleja en los textos que se muestran en el componente. Cada uno de los textos de un componente está almacenados en un Input. Cada variante agrega un nuevo Input para cada texto, de modo de poder tener textos distintos con solo cambiar el número de variante.
- Vínculos: todos los links de un componente son paramétricos, y pueden ser modificados a través de un Input. Si el vínculo es de texto, hay además un Input independiente para el texto. Tienen el mismo nombre, y el vínculo agrega al final _href.
- Imagen: todas las imágenes tienen un Input que modifica el atributo src del tag de la imagen, por lo que alterar el Input implica el cambio automático de la imagen que se despliega. Los Inputs de imagen terminan en _src.
- Placeholder: los campos de formulario pueden incluir placeholders. Si los incluyen, el texto del placeholder se modifica a través de un Input. Para poder identificarlos el nombre del Input termina en _plch.
Un detalle importante es que los valores por omisión, que es lo que muestra la app-demo solo se incluyen si los atributos defaultTexts y defaultImages están en "on" para textos e imágenes respectivamente. De lo contrario, se muestra espacio transparente respetando el tamaño de modo que el componente no se deforme.
Actualizar los Text Inputs
Los text Inputs pueden ser actualizados de tres formas: agregando atributos al componente, de forma programática en el código del padre o utilizando el servico WcfSubcomps. Mostramos cada una de ellas a continuación.
Tomaremos como ejemplo el siguiente componente:
Modificar los Inputs utilizando atributos
Una forma muy sencilla de asignar valores a los Inputs es agregando atributos al cargar el componente. Si los valores no van a cambiar durante la ejecución de la aplicación, esta es probablemente la forma más conveniente.
Si incluimos los atributos que muestra el código, el componente se desplegará tal como muestra la imagen.
<comp-site-card
s22_november="12 de octubre"
top_10_product_design_ideas="Las mejores ideas de diseño"
design="Diseño"
>
Lo mismo se puede hacer para cambiar las imágenes:
<comp-site-card
vector_rectangle_1_src = "assets/img/abstracto.png"
vector_rectangle_3_src = "assets/img/iconoRojo.png"
>
Y por supuesto que se pueden modificar todos los atributos juntos:
<comp-site-card
s22_november="12 de octubre"
top_10_product_design_ideas="Las mejores ideas de diseño"
design="Diseño"
vector_rectangle_1_src = "assets/img/abstracto.png"
vector_rectangle_3_src = "assets/img/iconoRojo.png"
>
Modificar los Inputs programáticamente
El mismo efecto que asignando atributos se puede conseguir programáticamente, utilizando el popular two-way binding de Angluar. Se muestra el código typescript y HTML de componente padre para el cambio de los textos. El código es idéntico para cualquier otro Text Input.
En el typescritp:
parent_s22_november = signal('12 de octubre');
parent_top_10_product_design_ideas = signal('Las mejores ideas de diseño');
parent_design = signal('Diseño');
En el HTML:
<comp-site-card
[(s22_november)] = "parent_s22_november"
[(top_10_product_design_ideas)] = "parent_top_10_product_design_ideas"
[(design)] = "parent_design"
>
Si se hace de forma programática, en cualquier momento se puede ejecutar la función set de cualquiera de los Inputs del padre creados con signal y cambiará el valor.
ngOnInit() {
setTimeout(() => {
this.parent_s22_november.set('20 de julio');
}, 3000);
}Este código modificará la fecha en el componente, 3 segundos después de que cargue.
Modificar los atributos utilizando el servicio WcfSubcomps
Los componentes generados por WCF tienen incluida la posibilidad de ser modificados en cualquier momento y desde cualquier lugar de la aplicación utilizando un servicio inyectable denominado WcfSubcomps.
A diferencia de de la modificación por atributos o programática, que se realiza desde el padre, el servicio WcfSubcomps permite cambiar los Inputs desde cualquier componente de la aplicación, independientemente de si este es un ancestro, descendiente o si está en otra rama que el componente a modificar. Lo único que se requiere es el id del componente y el nombre del Input, algo que es muy sencillo de obtener en la app-demo.
Este es el código para modificar el atributo s22_november
this.wcfService.changeAttribute({"id":"site-card", "s22_november":"12 de octubre"});
Y este es el resultado
Los Inputs se pueden modificar de a uno, con sucesivas llamadas o todos juntos, como se muestra a continuación
this.wcfService.changeAttribute({"id":"site-card",
"s22_november":"12 de octubre",
"top_10_product_design_ideas" : "Las mejores ideas de diseño",
"design" : "Diseño",
"vector_rectangle_1_src" : "assets/img/abstracto.png",
"vector_rectangle_3_src" : "assets/img/iconoRojo.png"
});El resultado es el mismo que al hacerlo por atributos o por programación:
Una ventaja significativa de la modificación utilizando el servicio WcfSubcomps, es que se pueden cambiar también los atributos de los subcomponentes. En el ejemplo, podemos asignar valores a los textos de los botones, algo que por las otras formas de modificación deberíamos hacer modificando el componente. Como siempre, los id de los subcomponentes y los nombres de los Inputs seo obtienen fácilmente de la app-demo.
Aquí un ejemplo
this.wcfService.changeAttribute({"id":"site-card",
"s22_november":"12 de octubre",
"top_10_product_design_ideas" : "Las mejores ideas de diseño",
"design" : "Diseño",
"vector_rectangle_1_src" : "assets/img/abstracto.png",
"vector_rectangle_3_src" : "assets/img/iconoRojo.png"
});
this.wcfService.changeAttribute({"id":"site-card.botones",
"button" : "Programa"
});
this.wcfService.changeAttribute({"id":"site-card.botones_1",
"button" : "Oradores"
});
this.wcfService.changeAttribute({"id":"site-card.botones_2",
"button" : "Registro"
});
Inputs para formularios
Cuando un componente incluye campos de formulario para combos (tag select de HTML) o para Radio Buttons (tag input type radio de HTML) WCF crea un Input de Angular que permite cargar en tiempo de ejecución los valores. Dado que es un Input estándar de Angular, se podría cargar el valor como atributo en el template de HTLM del componente, pero no parece la forma más usual o recomendable, por lo que mostraremos la modificación programática desde el padre y la utilización del servicio WcfSubcomps.
Modificando campos de formulario programáticamente
Tomemos como ejemplo el siguiente formulario, con un select y un radio
En primer lugar de la columna derecha, describiendo al componente dos-campos se encuentra la información del formulario, que muestra en tiempo real los valores de los campos.
Debajo están los nombres de las variables que contienen las opciones del formulario. Si se agregó el atributo defaultTexts=”on”, tal como hace la app-demo, el componente genera para cada uno de ellos un array de 4 opciones con texto “Option N” y valor “N”.
Naturalmente que estos valores por omisión solo sirven para visualizar el componente. En la vida real no solo las opciones serán otras, sino que muchas veces se cargan dinámicamente en función de otros eventos y variables del sistema.
Ello se puede hacer de forma programática, otra vez recurriendo al two-way binding de Angular. El siguiente código:
En el typescript del componente padre:
parent_comboEjemplo = signal([{text: "Artigas", value:"AR"}, {text: "Salto", value:"SA"}, {text: "Paysandú", value:"PY"}, {text: "Rio Negro", value:"RN"}, {text: "Soriano", value:"SO"}]);
parent_radioEjemplo = signal([{text: "Vegetales", value:"Vegetales"}, {text: "Carnes", value:"Carnes"}, {text: "Mariscos", value:"Mariscos"}]);
En el HTML del componente padre:
<comp-dos-campos
[(comboEjemploOptions)] = "parent_comboEjemplo"
[(radioEjemploOptions)] = "parent_radioEjemplo"
>Producirá la siguiente salida:
Naturalmente que los array de opciones pueden tener cualquier cantidad de parejas de valores y el contenido tanto de los textos como de los valores puede ser cualquier cadena de caracteres.
También es importante señalar que en cualquier momento de la ejecución, utilizando la función set de los Inputs del padre se puede cambiar el contenido del array y por tanto las opciones desplegadas.
Modificar los campos del formulario utilizando el servicio WcfSubcomps
Dado que los valores para las opciones de los select y radio buttons están almacenados en Inputs estándar de Angular, se pueden modificar en cualquier momento y desde cualquier lugar de la aplicación utilizando el servicio WcfSubcomps. Para ello solo se necesita el id del componente y el nombre del input, que se obtienen fácilmente de la app-demo, tal como se muestra más arriba.
El código para realizar el mismo cambio de opciones que se realizó a través del código del padre, en el ejemplo del apartado anterior, es el siguiente:
this.wcfService.changeAttribute({"id":"dos-campos", "comboEjemploOptions":
[{text: "Artigas", value:"AR"},
{text: "Salto", value:"SA"},
{text: "Paysandú", value:"PY"},
{text: "Rio Negro", value:"RN"},
{text: "Soriano", value:"SO"}
]}
);
this.wcfService.changeAttribute({"id":"dos-campos", "radioEjemploOptions":
[{text: "Vegetales", value:"Vegetales"},
{text: "Carnes", value:"Carnes"},
{text: "Mariscos", value:"Mariscos"}
]}
);El resultado es idéntico al que obtendríamos si lo hubiéramos realizado modificando el código del componente padre:
Naturalmente que en este caso también se puede utilizar cualquier extensión del array de opciones, y cualquier string válida para los textos y valores. El servicio se puede utilizar en cualquier momento del ciclo de vida del componente.
Inputs para templates con @for
Cuando WCF incluye en la plantilla HTML un @for para repetir un bloque de componentes, agrega un conjunto de variables que permiten tanto modificar la cantidad de elementos como acceder a los Inputs Angular de estos elementos.
Tomemos el ejemplo clásico de un menú, donde la cantidad de opciones y los textos de las opciones serán variables. La app-demo del componente lo muestra con los valores default.
El código del componente va a estar preparado para poder modificarlo dinámicamente de la siguiente forma:
forIterator_a: para cada @for incluido, se crea un Input bidireccional, utilizando la funciónmodel()con la cantidad de elementos. Se pueden agregar o quitar elementos dinámicamente cambiando el valor de esta variable, algo que la app-demo permite visualizar.
El nombre de la variable agrega _b, _c y así sucesivamente en la medida en que el componente agrega @for. Es fácil ver la correspondencia en la app-demo, señalando el área que ocupa cada for. Los @for pueden estar anidados.- Componentes dentro del @for: los componentes que quedan dentro del for agregan secuencialmente _f0, _f1, …, _fn para poder identificarlos sin ambigüedad. Esto permite utilizar el servicio wcfSubcomps para acceder a cada uno de ellos por separado.
La modificación de los identificadores de los subcomponentes es dinámica, lo que significa que cuando se agregan o se quitan elementos del @for, los subcomponentes se modifican como es esperable que lo hagan.
Utilizando estas propiedades, es muy sencillo utilizar el componente del ejemplo para crear un menú. El código es el siguiente:
this.wcfService.changeAttribute({"id":"menu-con-opciones.categoria-menu_f0", "opcion_de_menu":"Lácteos"});
this.wcfService.changeAttribute({"id":"menu-con-opciones.categoria-menu_f1", "opcion_de_menu":"Frutas y Verduras"});
this.wcfService.changeAttribute({"id":"menu-con-opciones.categoria-menu_f2", "opcion_de_menu":"Limpieza"});
this.wcfService.changeAttribute({"id":"menu-con-opciones.categoria-menu_f3", "opcion_de_menu":"Fiambrería"});
this.wcfService.changeAttribute({"id":"menu-con-opciones.categoria-menu_f4", "opcion_de_menu":"Panadería"});
this.wcfService.changeAttribute({"id":"menu-con-opciones", "forIterator_a":5});
Es importante prestar atención a que el Input forIterator_a, que es el que aumenta la cantidad de elementos del menu se modifica al final, de modo de que cuando aparezcan los nuevos elementos ya tengan cargado el texto correspondiente.
Y el resultado será:
Leave a Reply