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, 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. Todos los textos de un componente están 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 del componente 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.wcfSubcompsService.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.wcfSubcompsService.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.wcfSubcompsService.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.wcfSubcompsService.changeAttribute({"id":"site-card.botones",
"button" : "Programa"
});
this.wcfSubcompsService.changeAttribute({"id":"site-card.botones_1",
"button" : "Oradores"
});
this.wcfSubcompsService.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 “Opción 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_selectDelDosOptions = signal([{text: "Artigas", value:"AR"}, {text: "Salto", value:"SA"}, {text: "Paysandú", value:"PY"}, {text: "Rio Negro", value:"RN"}, {text: "Soriano", value:"SO"}]);
parent_inputRadioButtonOptions = signal([{text: "Vegetales", value:"Vegetales"}, {text: "Carnes", value:"Carnes"}, {text: "Mariscos", value:"Mariscos"}]);
En el HTML del componente padre:
<comp-dos-campos
[(selectDelDosOptions)] = "parent_selectDelDosOptions"
[(inputRadioButtonOptions)] = "parent_inputRadioButtonOptions"
>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.wcfSubcompsService.changeAttribute({"id":"dos-campos", "selectDelDosOptions":
[{text: "Artigas", value:"AR"},
{text: "Salto", value:"SA"},
{text: "Paysandú", value:"PY"},
{text: "Rio Negro", value:"RN"},
{text: "Soriano", value:"SO"}
]}
);
this.wcfSubcompsService.changeAttribute({"id":"dos-campos", "inputRadioButtonOptions":
[{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.
Leave a Reply