Creación e implementación de Modelos en componentes de Angular – ejemplo práctico
Un modelo en angular es una clase que representa un objeto con propiedades que permite la utilización de la misma desde clases externas, evitando la reiteración de código. A lo largo de esta entrada veremos cómo construir un modelo y cómo implementarla en componentes.
Construcción de un modelo:
Estas clases se colocan dentro de src/app en una carpeta llamada models. El nombre de estos ficheros se escribe en minúscula: nombrefichero.ts. Como mencionamos previamente, un modelo es una clase que define un objeto con sus respectivas características, por ende, su sintáxsis es la siguiente: export class NombreClase{ constructor( public propiedad : tipo; public propiedad: tipo; ){} } La sintaxis previa declara las propiedades dentro del constructor, lo cual resulta una gran ventaja para el programador. También existe otra forma un poco más larga que declara las propiedades fuera del constructor y las inicializa dentro del mismo en base a los parámetros recibidos: export class NombreClase{ public propiedad : tipo; public propiedad : tipo; constructor(valor1, valor2){ this.propiedad : valor1; this.propiedad: valor2; } }
Implementación de un modelo:
Para implementar un modelo debemos importarlo en el componente que deseemos utilizarlo. Su sintaxis es la siguiente: Import { NombreModelo } from 'ruta/models/modelo.ts'
EJEMPLO PRÁCTICO
Realizaremos una aplicación basada en dos componentes (hotel y viajeros) y un modelo (viajero.ts). El componente hotel contendrá un array de tipo Viajero y el componente viajeros utilizará el modelo para visualizarlos. Además realizaremos las funcionalidades de añadir, editar y eliminar un viajero utilizando nuevamente nuestro respectivo modelo con el fin de comprobar el gran beneficio que aporta el uso de estos en nuestras aplicaciones.
Creación de la carpeta models y del fichero viajeros.ts
Dentro de app crearemos una carpeta llamada models. Luego seleccionamos "New file" y creamos un fichero llamado viajero.ts. Este fichero será nuestro modelo o clase.
Construcción del modelo viajero.ts:
Construcción del componente hotel:
Creamos el componente hotel (con sus respectivos ficheros) y como hemos mencionado previamente, este componente contendrá un array de tipo Viajero. Para poder hacer uso del modelo dentro de esta clase debemos importar viajero.ts: Import { Viajero } from './../../models/viajero';
A continuación, declaramos una variable que será un array de tipo Viajero y lo inicializamos dentro del constructor creando objetos con propiedades coincidentes a las declaradas en el modelo (el tipo de dato debe coincidir):
En el componente hotel.component.html recorreremos el array de viajeros y enviaremos cada objeto y su posición en el array al componente app-viajeros (esto nos será útil cuando posteriormente realizemos nuestros métodos de editar y eliminar):
Construcción del componente viajeros:
Este componente será el encargado de recibir cada uno de los objetos que envía app-hotel y visualizarlos. Para ello, necesitaremos importar el modelo viajeros.ts, Input (para poder recibir las propiedades enviadas del padre), Output(para poder enlazar los métodos enviados desde el padre con el hijo) y EventEmitter.
Por un lado, en la clase de viajeros.component.ts declararemos una variable con @Input para poder recibir de app-hotel cada viajero y otra variable @Input para recibir la posición. Por otro lado, declararemos dos métodos (de momento vacíos): deleteViajero() y editarViajero(). Luego mostramos cada viajero en el html accediendo a cada una de las propiedades que posee el objeto recibido y que previamente hemos declarado en el modelo. Además añadiremos en la vista dos botones: editar y eliminar junto a el evento "click" que ejecutarán los métodos mencionados previamente: viajeros.component.ts:
viajeros.component.html:
Resultado HTML: En la siguiente imagen podemos observar cada viajero visualizado. A continuación realizaremos las funcionalidades de añadir, editar y eliminar (utilizando el modelo).
Creación de la funcionalidad añadir:
En el controlador del componente hotel, declararemos dos funciones: mostrarNuevoFormulario() y crearViajero(). La primera función servirá como una función auxiliar ya que cuando pulsemos el botón de "añadir viajero" cambiará el valor de una variable auxiliar a "true" y en la vista mostraremos con un *ngIf el formulario para poder recoger los nuevos valores del objeto que deseemos añadir. La segunda función recogerá los valores del formulario (por referencia) y con un "push" lo añadiremos al array de viajeros. hotel.component.ts:
Luego añadiremos una función cancelarNuevo() que pondrá a false la variable auxiliar (this.nuevo) mencionada previamente para ocultar el formulario cuando no deseemos añadir mas viajeros:
hotel.component.html:
Resultado HTML:
Creación de la funcionalidad eliminar:
Al principio del ejemplo, enviamos desde el componente app-hotel cada uno de los objetos de tipo Viajero y la posición que ocupa el mismo en el array. Ahora añadiremos una función en app-hotel que será eliminarViajero() y que enviaremos a app-viajeros y enlazaremos con @Output(): hotel.component.html:
hotel.component.ts:
Este método recibe con event la posición del elemento que deseamos borrar y con el método splice() lo elimina. Ahora debemos enlazar el método recibido en el componente viajeros con el método eliminarViajero() que se encuentra en el componente hotel, para ello importamos @Ouput() y EventEmitter() y lo enlazamos:
Luego añadiremos una función llamada deleteViajero() que será ejecutada cuando hagamos "click" en el botón de eliminar que se encuentra en la vista de viajeros. A su vez, este método llamará al método enlazado eliminarViajero() y enviará mediante emit(), la posición del elemento pulsado:
Resultado HTML: Si probamos esta funcionalidad sobre el primer elemento que aparece, podremos observar que el elemento se elimina del array:
Creación de la funcionalidad editar:
Ya hemos creado las funcionalidades de añadir y eliminar. Por último haremos la funcionalidad de poder editar un objeto de tipo Viajero del array (utilizando también dicho modelo). Tendremos en hotel.component.ts una variable auxiliar (editar) que estará inicializada a false y que utilizaremos posteriormente para visualizar en la vista hotel un formulario utilizando *ngIf:
Además declararemos tres funciones: activarEdicion() que enviaremos y enlazaremos al componente viajeros y que mediante event recibirá la posición del elemento que deseemos editar y pondrá a true la variable auxiliar (editar), updateViajero() que recogerá los nuevos valores del formulario y cancelarEditar() que pondrá a false la variable editar y ocultará el formulario:
En hotel.component.html enviaremos el método activarEdicion() a app-viajeros:
En esta vista también añadiremos el formulario para editar que se activará en base al valor de la variable editar:
Recibiremos y enlazaremos dicho método en viajeros.component.ts utilizando @Output() y EventEmitter():
Posteriormente declararemos en viajeros.component.ts un método editarViajero() que llamará al metodo enlazado activarEdicion() y enviará mediante emit() la posición del elemento que deseemos editar:
Resultado HTML: Si damos "click" en el botón editar aparecerá el formulario y si cambiamos por ejemplo el nombre del primer elemento podremos observar lo siguiente:
Para finalizar quisiera agregar que durante el desarrollo del ejemplo, muchas veces el resultado HTML no se actualizaba correctamente y una de las soluciones fue volver a lanzar el servidor con ng serve. Además recomiendo la extensión Angular Schematics ya que permite la autogeneración de un componente ( pulsamos sobre la carpeta que deseemos crear un componente click derecho y seleccionamos "Generate a component" y ¡listo!). Espero que este post os haya sido útil.
Autor/a: María Victoria Castro Dotta Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma Centro: Tajamar Año académico: 2020-2021 Código / recursos utilizados / Otros datos de interés: código creación e implementación de Modelos en Angular