TypeScript / Angular – @Input

Bienvenidos sean a este post, hoy veremos como ingresar datos.

En el post anterior mediante interface creamos nuestro primer dato pero todavia no lo visualizamos. Esto lo vamos a modificar en base a este decorador y como pasar la informacion pero necesitaremos de nuestro proyecto. En caso de no poseerlo les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para ser utilizado. Nuestro primer paso sera agregar un nuevo parametro como es @Input, el cual nos permitira ingresar nuevos datos. Para ello vamos a ir a ubicacion-viviendas.component.ts y modificaremos el codigo de la siguiente manera:

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Ubicacionviviendas } from '../ubicacionviviendas';

@Component({
  selector: 'app-ubicacion-viviendas',
  standalone: true,
  imports: [],
  template: `
    <p>
      ubicacion-viviendas works!
    </p>
  `,
  styleUrl: './ubicacion-viviendas.component.css'
})
export class UbicacionViviendasComponent {
        @Input() ubicacionViviendas!: Ubicacionviviendas;
}

Al comienzo importaremos los modulos que son necesarios, Input y CommonModule, pero tambien importaremos a la interfaz. En el momento de exportar la clase, pasaremos al @Input y aqui usaremos a la interfaz como tipo de dato y usaremos al operador ! para que lo podamos pasar como null o undefined, especialmente para no tener un error al momento de compilarlo.

Lo siguiente que haremos sera unir una propiedad al tag que usamos para mostrar el contenido. Para ello debemos ir a hogar.component.ts en src/app/hogar y buscaremos la siguiente linea:

<app-ubicacion-viviendas></app-ubicacion-viviendas>

Para modificarla de la siguiente manera:

          <app-ubicacion-viviendas [ubicacionViviendas]="ubicacionViviendas">
                </app-ubicacion-viviendas>

Para unir esta propiedad utilizamos el formato [atributo] = «valor», esto es para informarle que el valor pasado debe ser tratado como una propiedad de la clase del component y no como un valor. Si lo observan es el que pasamos como propiedad al momento de exportar la clase de componente hogar. Verifiquen que la pagina sigue funcionando correctamente, si es asi pasemos al siguiente tema.

Lo siguiente que haremos sera pasar valores a nuestro listado,, recuerden que tenemos uno creado pero que no vemos. Para poder visualizarlo vamos a necesitar ir al archivo ubicacion-viviendas.component.ts y modificaremos a la propiedad template de @Component de la siguiente manera:

  template: `
    <section class="listado">
        <img class="listado-foto" [src]="ubicacionViviendas.foto"
                alt="Foto del exterior de {{ubicacionViviendas.nombre}}">
        <h2 class="listado-top">{{ ubicacionViviendas.nombre }}</h2>
        <p class="listado-ubicacion">
          {{ubicacionViviendas.ciudad}}, {{ubicacionViviendas.pcia}}
        </p>
    </section>
  `,

Aqui establecimos la seccion nueva, vean como pasamos los parametros creados anteriormente al momento de exportar la clase. Volvemos a usar la sintaxis de [atributo] = «valor» para poder emplear la imagen, asi como tambien pasamos el resto de los datos para identificar al hogar. Si verifican la pagina debe verse de la siguiente manera:

Con esto ya podemos ingresar informacion y la aplicacion puede manejarla y mostrarla. Esto es de una forma muy basica pero consideramos funcional. Pero esto no termina aqui en los proximos posts seguiremos mejorandolo. Antes de finalizar les dejo un link con todos los archivos del proyecto asi como tambien los trabajados en este post:

En resumen, hoy hemos visto a @Input, que es, como se utiliza, luego lo aplicamos al codigo del proyecto para ver como recibe la informacion y gracias a este como podemos visualizarla. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.