app-demo Angular

Cada componente Angular incluye un componente adicional para demostración con el nombre app-demo-nombre-del-componente, al que denominamos genéricamente app-demo.

Ejecutar la app-demo es muy sencillo, siguiendo las instrucciones indicadas en esta página

La app-demo permite identificar subcomponentes, variantes, switches, campos de formularios, @for y los inputs, tanto los de texto como las direcciones de las imágenes. Permite además controlar como se despliega cuando varían el ancho y el alto, así como quitar los textos e imágenes por omisión.

Barra de control

La barra de control permite simular el comportamiento del componente en distintas circunstancias. Aquí un detalle de las opciones

• Disposition: mueve la barra lateral del costado (Columns) hacia abajo (Rows), permitiendo usar todo el ancho de la pantalla y analizar el comportamiento del componente cuando cambia el ancho de la ventana del navegador.
• Width: cambia el ancho del div que contiene al componente.
• Height: cambia el alto del div que contiene al componente.
• Remove texts: todos los textos de un componente son Inputs creados con model() y pueden cambiar. El componente tiene valores por omisión para poder mostrarlo. Al deshabilitar esta opción se muestra el componente sin textos, tal como se desplegará en un ambiente de producción (se modifica con el atributo defaultTexts).
• Remove Images: todas las url de las imágenes de un componente son Inputs creados con model() y pueden cambiar. El componente tiene valores por omisión para poder mostrarlo. Al deshabilitar esta opción se muestra el componente sin imágenes, tal como se desplegará en un ambiente de producción (se modifica con el atributo defaultImages).

Barra lateral

La barra lateral (aunque con la opción Disposition puede llevarse abajo del componente la llamamos lateral, dado que esta es la ubicación habitual) permite comprender el alcance y comportamiento de todos los atributos de un componente y sus subcomponentes.

El componente principal

El primer cuadro de la barra lateral corresponde siempre al componente principal. Sus atributos y opciones se describen a continuación

• Identificador (id): el título, sobre fondo celeste, corresponde al identificador del componente en la aplicación (atributo id). En producción dependerá de lo que el desarrollador decida, pero es obligatorio incluir un id para poder acceder a los atributos de los sucomponentes.
• Switches: los switches (se corresponden con las propiedades booleanas en Figma) permiten mostrar/ocultar partes del componente y si se agregó customCSS podría eventualmente cambiar otras propiedades. En el panel lateral los links dan acceso al comportamiento al modificar su valor.
• Variants: las variantes (se corresponden con las propiedades tipo variant en Figma) permiten cambiar la estructura del HTML del componente. En el panel lateral los links dan acceso al comportamiento al modificar su valor.
• Text Inputs: se corresponden con los Inputs de todos los elementos textuales y de imagen en el componente. Se muestra el nombre del atributo y valor por omisión. El final del nombre indica el tipo de text input del que se trata
  • _src: es la fuente de una imagen
  • _href: es el destino (atributo href) de un vínculo
  • _plch: es el texto del placeholder de un campo
  • _srcBkg: es la fuente de una imagen de fondo
  • ninguno de los anteriores: es un texto que se despliega en el componente.

Los subcomponentes

El cuadro correspondiente a cada subcomponente es similar al del componente principal y solo cambia en el título, donde se agregan:

• Checkbox de identificación: el checkbox a la izquierda permite identificar visualmente el componente, agregando un cuadro rojo alrededor.
• Identificador (id): después del nombre del subcomponente aparece el identificador (atributo id) del componente, que se forma con el nombre de todos los componentes ancestros separados por puntos (en este caso solo el padre).
  Es importante hacer notar que mientras el identificador del componente principal se puede cambiar, y es algo imprescindible para identificar las distintas instancias de un componente en una misma pantalla, los de los subcomponentes no se pueden alterar.

Componentes con campos de formulario

Cuando un componente contiene campos de formulario, la appDemo muestra los nombres de las variables que permiten acceder a ellos y muestra en tiempo real su comportamiento.

Los formularios en Angular hacen uso intensivo de la API ControlValueAccesor de modo que para el padre el conjunto de campos incluidos en el formulario se comporte como un único campo compuesto, independientemente de su complejidad.

Lo primero que muestra la app-demo es el nombre de variable a usar para acceder a ese campo compuesto utilizando un FormControl. Le sigue la estructura del campo compuesto, incluyendo si hay subcomponentes con campos (en el ejemplo deptoYCiudad) lo que genera campos anidados.

Para utilizar el componente y acceder a sus campos a través del campo compuesto, se declara en el padre un FormGroup que incluye toda la estructura de campos como un único FormControl

formAppDemo = new FormGroup({
	direccionCompuestaForm: new FormControl({
		calle: "",
		numero: "",
		apartamento: "",
		deptoYCiudad: {
			ciudad: "",
			departamento: ""
		},
	})
});

Puede acceder a todos los detalles del uso de formularios en la página de soporte de Formularios en Angluar.

Componentes con @for

Cuando un componente tiene en su template algún @for para repetir un bloque de componentes, la app-demo lo refleja y brinda toda la información necesaria para utilizarlo.

El código del componente está previsto para que @for sea alterado dinámicamente. La app-demo muestra los parámetros y variables que deben utilizarse.

• forIterator_a: para cada @for incluido, se crea un Input bidireccional, utilizando la función model() 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.
  La app-demo muestra el nombre de esta variable, que si es una sola termina en _a y si hay más de un @for en el componente agrega _b, _c y así sucesivamente.
• 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 app-demo muestra el id de cada uno de los sub-componentes dentro del @for.

Puede acceder a todos los detalles del uso de @for en la página de Inputs, que contiene un apartado específico.