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.
creacionCarpetaModels

Construcción del modelo viajero.ts:

creacionModeloViajero

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';
importarModeloClaseHotel
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): 
InicializacionArrayHotel
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): 
enviarArrayViajeros

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.
importacionesViajeros
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: 
claseViajeros1
viajeros.component.html:
mostrarViajeros
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).  
resultadoMostrarViajeros

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:
crearViajero
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:
cancelarnuevo
hotel.component.html: 
formulariocrearnuevo
Resultado HTML: 
FUNCIONAÑADIRNUEVO

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: 
activarEliminar
hotel.component.ts: 
eliminarviajerohotel
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: 
enlazareliminar
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: 

deleteViajeroviajero
Resultado HTML:
Si probamos esta funcionalidad sobre el primer elemento que aparece, podremos observar que el elemento se elimina del array:
resultadoEliminar

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: 
 
editarAux
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: 
metodosEditar
cancelareditar
En hotel.component.html enviaremos el método activarEdicion() a app-viajeros: 
enviarMetodoEditar
En esta vista también añadiremos el formulario para editar que se activará en base al valor de la variable editar:
formuEDITAR
Recibiremos y enlazaremos dicho método en viajeros.component.ts utilizando @Output() y EventEmitter(): 
recibirMetodoEDITAR
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:
 
metodoEDITRAVIJAERO
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:
resultadoEDIT1
RESULTADOEDITAR2
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

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.