TypeScript / Angular – componentes

Bienvenidos sean a este post, hoy agregaremos componentes al proyecto.

En este post repasaremos como agregar commponentes a nuestros proyectos pero necesitaremos del proyecto del post anterior, sino lo poseen les dejo un link para descargarlo:

Simplemente extraigan el directorio en el PC y ya esta listo para ser usado. Nuestro siguiente paso sera crear un nuevo componente, para ello ejecutaremos el siguiente comando dentro del directorio:

$ ng generate component hogar --inline-template --skip-tests

En este post mencionamos que mediante este comando sin opciones genera cuatro archivos pero aqui agregamos dos opciones. La primera es para que no genere el archivo html, dado que lo estamos usando directamente sin referenciarlo a otra pagina, y la segunda opcion es para indicar que no haremos ningun test por lo tanto no genera este archivo. Con esto tendran la siguiente salida:

$ ng generate component hogar --inline-template --skip-tests
CREATE src/app/hogar/hogar.component.css (0 bytes)
CREATE src/app/hogar/hogar.component.ts (244 bytes)
$

Aqui tendremos el nuevo directorio y con estos dos archivos solamente. Con esto realizado volveremos al archivo app.component.ts y al inicio agregaremos la siguiente linea:

import { HogarComponent } from './hogar/hogar.component';

Esta linea nos importara la clase del complemento que creamos. Nuestro siguiente paso sera modificar la propiedad imports en @Component. Tomemos la siguiente linea:

imports: [RouterOutlet],

Y hagamos la siguiente modificacion:

imports: [ RouterOutlet, HogarComponent ],

Con todo esto ya tenemos todas las importaciones necesarias solo nos resta modificar al template de @Component que agregamos anteriormente de la siguiente manera:

  template: `
        <main>
          <header class="nombre-marca">
            <img class="logo-marca" src="/assets/logo.png" alt="logo"
                aria-hidden="true">
          </header>
          <section class="contenido">
            <app-hogar></app-hogar>
          </section>
        </main>`,

En este caso le agregamos basicamente un codigo para que tenga un encabezado, header, donde cargara un logo para la marca, luego una seccion para el contenido, donde llamara al complemento inicio. Tenemos todo menos el logo, para ello descarguen el siguiente archivo:

Extraigan la imagen y agreguenlo en el directorio assets ubicado en src. Con simplemente agregarlo ya tenemos todo listo, la aplicacion ahora se vera de la siguiente manera:

Nota:
Sino se actualiza automaticamente, reinicien la aplicacion y funcionara.

Ya tenemos nuestro complemento implementado, procedamos a agregarle una caracteristica. Para ello debemos ir a hogar.component.ts en src/app/hogar. Busquen la propiedad template de @Component y modifiquenla de la siguiente manera:

  template: `
        <section>
          <form>
            <input type="text" placeholder="Filtrar por ciudad">
            <button class="primary" type="button">Buscar</button>
          </form>
        </section>
  `,

En este caso creamos otra seccion donde tendremos un form con dos elementos. El primero sera un input para ingresar un texto y un boton para ejecutar el form. Por el momento no hara nada pero esta es la base de nuestra aplicacion. La siguiente modificacion sera en hogar.complement.css donde agregaremos el siguiente codigo:

hogar/hogar.component.css

.resultados {
  display: grid;
  column-gap: 14px;
  row-gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
  margin-top: 50px;
  justify-content: space-around;
}

input[type="text"] {
  border: solid 1px var(--primary-color);
  padding: 10px;
  border-radius: 8px;
  margin-right: 4px;
  display: inline-block;
  width: 30%;
}

button {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

@media (min-width: 500px) and (max-width: 768px) {
  .resultados {
      grid-template-columns: repeat(2, 1fr);
  }
  input[type="text"] {
      width: 70%;
  }
}

@media (max-width: 499px) {
  .resultados {
      grid-template-columns: 1fr;
  }
}

Estos son estilos que aplicaremos a los distintos elementos del complemento. En el primer caso es una clase para los resultados. Luego tenemos dos estilos para el input y el boton. Lo siguiente son dos parametros para establecer limites en base a la ventana. Por ultimo, tenemos que ir al archivo styles.css en el directorio src y agregaremos el siguiente codigo:

src/styles.css

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Be Vietnam Pro', sans-serif;
}
:root {
  --primary-color: #605DC8;
  --secondary-color: #8B89E6;
  --accent-color: #e8e7fa;
  --shadow-color: #E8E8E8;
}

Estos son los parametros bases para la pagina y agregamos los colores que utilizaremos en nuestros elementos. Si ven la pagina ahora se vera de la siguiente forma:

Hasta ahora hemos visto algo muy parecido en este post, con la unica diferencia que en lugar de usar las paginas predeterminadas hemos utilizado codigos basicos mediante template. Una caracteristica que no mencione en la propiedad template es el uso del acento grave (`). Este permite que se pueda usar la multilinea en nuestras variables, sobre esto hablamos mas profundamente en este post, y con esto comentado podemos comenzar a ver un nuevo tema. En este caso crearemos un nuevo componente de la siguiente forma:

$ ng generate component ubicacionViviendas --inline-template --skip-tests

Generamos el nuevo componente, pero con una particularidad que lo hara en el directorio ubicacion-viviendas. La segunda particularidad es que lo importaremos al complemento hogar, para ello iremos a hogar.component.ts y lo modificaremos de la siguiente manera:

hogar/hogar.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UbicacionViviendasComponent } from
        '../ubicacion-viviendas/ubicacion-viviendas.component';

@Component({
  selector: 'app-hogar',
  standalone: true,
  imports: [ CommonModule, UbicacionViviendasComponent ],
  template: `
        <section>
          <form>
            <input type="text" placeholder="Filtrar por ciudad">
            <button class="primary" type="button">Buscar</button>
          </form>
        </section>
        <section class="resultados">
          <app-ubicacion-viviendas></app-ubicacion-viviendas>
        </section>
  `,
  styleUrl: './hogar.component.css'
})
export class HogarComponent {

}

Las modificaciones son pocas pero tienen grandes cambios. La primera sera la importacion de dos modulos. El primero sera CommonModule, y el segundo sera el componente que creamos anteriormente. Luego en @Component modificamos a imports para que importe las clases de los dos modulos anteriores. Y por ultimo agregamos una nueva seccion en template donde aplicaremos la clase resultados, la cual agregamos anteriormente en el archivo .css, y en este mostraremos el contenido de nuestro complemento. El resto sigue de la misma manera sin cambios. Nuestro siguiente paso sera ir al archivo ubicacion-viviendas.component.css y agregar el siguiente codigo:

ubicacion-viviendas/ubicacion-viviendas.component.css

.listado {
  background: var(--accent-color);
  border-radius: 30px;
  padding-bottom: 30px;
}
.listado-top {
  color: var(--primary-color);
  padding: 10px 20px 0 20px;
}
.listado-foto {
  height: 250px;
  width: 100%;
  object-fit: cover;
  border-radius: 30px 30px 0 0;
}
.listado-ubicacion {
  padding: 10px 20px 20px 20px;
}
.listado-ubicacion::before {
  content: url("/assets/location-pin.svg") / "";
}

section.listado a {
  padding-left: 20px;
  text-decoration: none;
  color: var(--primary-color);
}
section.listado a::after {
  content: "\203A";
  margin-left: 5px;
}

Estos seran clases que aplicaremos en este complemento, estan principalmente orientadas al listado y los elementos de esta. Tanto las fotos, como los links, datos de esta y afines, esto dejara a nuestra aplicacion de la siguiente manera:

Vamos a dejarlo hasta aca, porque nuestra intencion es simplemente repasar como son los componentes. en los proximos posts iremos agregando mas temas y la completaremos. Les dejo un link con todos los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos repasado a los componentes de angular, como se crean, como se implementan, como podemos usar uno desde otro, espero les haya sido de utillidad 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.