Angular: 16. Peticiones HTTP

Vamos a ver cómo obtener información de otro sitio web a través de una petición HTTP.

Vamos a entrar en la página "restcountries.eu", que posee un servicio de datos disponible para acceder a ellos mediante http. Vamos a buscar una lista de países cuyo idioma sea el español.
Para ello, entramos en la página, pulsamos en el menú "Language" y nos guardamos la url señalada en la imagen:

Ahora vamos a modificar el "app.module.ts" para importar el componente "HttpClientModule":

Vamos a elegir el componente "home" para capturar y mostrar los datos. Abrimos el "home.component.ts" y lo modificamos como sigue:

Como se puede ver, lo primero que hacemos es importar el "HttpClient".
Después nos creamos una variable de arrays llamada "paises".
En el constructor de la clase es donde hemos realizado la mayor modificación.
En primer lugar inyectamos en el constructor una variable "http" de la clase "HttpClient".
En segundo lugar realizamos la petición http en sí misma, haciendo un "get" de la dirección que copiamos antes de la web de países y añadiendo en el "subscribe" una función de flecha que vamos a utilizar para guardar la respuesta de la petición (la lista de países) en nuestra variable de clase "paises". Por último aprovechamos la función para mostrar a través de la consola el contenido de la respuesta.

Ahora simplemente modificamos el "home.component.html" para que muestre la lista de países mediante la directiva "*ngFor":

Y comprobamos que realmente se muestra la lista de países, y el contenido de la respuesta de la petición en la consola:

Y eso es todo.

Angular: 15. Pipes personalizados. Domseguro

Ahora vamos a crear un pipe que normalmente se utilizará para cualquier aplicación que cargue datos de otra página web, como Youtube, Spotyfy, o similares.

Primero vamos a crearnos un nuevo pipe mediante el comando "ng g p pipes/domseguro", que nos creará los ficheros necesarios.

Vamos a explicar el problema por el que necesitamos crear este pipe.
Imaginemos que queremos insertar en nuestra página un vídeo de Youtube. Para eso basta con copiar el código que nos muestra Youtube en nuestra página html:

Si copiamos el código y levantamos la aplicación, comprobaremos que el vídeo funciona perfectamente.
Ahora imaginemos que queremos crear una aplicación que recopile varios vídeos de Youtube y que muestre el vídeo que sea oportuno en cada momento. Si este es el caso, lo normal sería que, en lugar de copiar todos los códigos de los vídeos de Youtube que queremos, mostremos sólo una ventana de vídeo en la pantalla y que carguemos en ella el vídeo necesario en cada momento, guardando la ruta "src" en una variable que cogería el valor del vídeo elegido:

Como se puede ver, todos los vídeos de Youtube tienen en común como fuente la cadena "https://www.youtube.com/embed/", seguida del identificador propio del vídeo, en este caso "8vxXVhUDEwo".
Lo normal es que utilicemos una variable para guardar el identificador del vídeo ("8vxXVhUDEwo" en este caso) que concatenaremos a la ruta base ("https://www.youtube.com/embed/") en el atributo "src" de la etiqueta.
Sin embargo, si hacemos esto nos saltará un error diciendo que la ruta no es segura y no podremos ver el vídeo. Esto lo solucionaremos con nuestro nuevo pipe.

Modificaremos el pipe como sigue:

Como podemos ver, hemos importado el componente "DomSanitizer", que es el que nos permitirá marcar una ruta como segura para que no nos de error el navegador.
Después lo hemos inyectado en el constructor del pipe.
Por último, en la función del pipe en sí, devolvemos la concatenación del parámetro "url" con el valor "value" (que será "https://www.youtube.com/embed/" + "8vxXVhUDEwo") marcado como seguro.

El pipe es así de sencillo. Ahora sólo tenemos que crear en el TypeScript del componente de la página una variable que contenga el identificador del vídeo:

Y modificar el código html del vídeo como sigue a continuación para utilizar el pipe:

Y comprobamos que ahora el vídeo funciona correctamente:

Y eso es todo. A partir de ahí, simplemente podemos cambiar el valor de la variable del TypeScript para cargar cualquier vídeo en esa ventana.

Angular: 14. Pipes personalizados. Capitalización

Ahora vamos a crearnos un Pipe personalizado por nosotros mismos.

Vamos a crearnos un Pipe que capitalice una cadena de texto, es decir, que la primera letra la pase a mayúscula y el resto la pase a minúsculas. Es más vamos a incluirle un parámetro booleano (verdadero o falso) para distinguir si queremos capitalizar sólo la primera letra de toda la frase, o si queremos capitalizar la primera letra de cada palabra de la frase.

Aunque los Pipes se pueden crear por consola con el Ancular CLI como el resto de componentes, vamos a crearlo esta vez de forma manual.

Primero nos creamos una carpeta "pipes" dentro de "app", y luego un fichero "capitalizado.pipe.ts" dentro de la misma:

El fichero "capitalizado.pipe.ts" lo informamos con lo siguiente:

Como podemos ver, no es más que una clase con la función "transform", que es la que se lanza al ejecutar el Pipe. Esta función tiene el parámetro "value", que es la variable sobre la que ejecutamos el Pipe, y otra booleana, que es la primera variable opcional que le podemos pasar al Pipe. Esta variable la inicializamos a verdadero en el constructor para que tenga el valor "true" por defecto, es decir, si no se la pasamos al ejecutar el Pipe.

La función lo único que hace es capitalizar la primera palabra o todas según el parámetro booleano.

Ahora tenemos que declarar el Pipe en el fichero "app.module.ts", como cualquier otro componente:

Con esto sería todo, ya sólo falta declarar una variable string en el TypeScript para utilizar nuestro Pipe:

Y utilizamos la variable y el Pipe en nuestro html. Hacemos la prueba con y sin parámetro booleano para probar los resultados:

Y aquí está el resultado:

Esto sería todo.

Como nota adicional, para crear un Pipe mediante comandos del Angular CLI, un ejemplo sería así:
"ng g p pipes/capitalizacion".

Angular: 13. Pipes

Vamos a ver qué son los pipes o "formateadores" de Angular.

Los Pipes son una forma de dar formato específico a los datos que mostramos en pantalla. Por ejemplo, podemos tener una variable llamada "Fernando", y queremos que, al mostrarla por la pantalla, aparezca como "FERNANDO", con todas las letras en mayúscula, PERO SIN AFECTAR AL VALOR DE LA VARIABLE, es decir, que el cambio sea sólo visual y que la variable dentro del programa siga teniendo el valor "Fernando". Para eso sirven los Pipes.
El uso más común de los Pipes es dar formato a las fechas (objetos de tipo Date) y que se muestren de una forma u otra según nuestras necesidades.

Vamos a ver el código de un programa sencillo en el que incluimos muchos de los pipes predefinidos por Angular y su resultado.

Se trata simplemente de una tabla de 3 columnas en la que mostramos el valor de una variable, el Pipe que le aplicamos, y el resultado de éste sobre la variable. Sólo tenemos que modificar el código html (para mostrar los datos) y el TypeScript (para crear las variables que utilizará el html) del componente inicial de la aplicación como sigue:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  nombre:string = "Fernando";
  arreglo:number[] = [1,2,3,4,5,6,7,8,9,10];
  PI:number = Math.PI;
  a:number = 0.234;
  salario:number = 1234.5;
  heroe = {
    nombre: "Logan",
    clave: "Worverine",
    edad: 500,
    direccion: {
      calle: "Primera",
      casa: "19"
    }
  }
  valorDePromesa = new Promise( (resolve, reject) => {
    setTimeout( () => resolve('LLego la data!'), 3500 );
  } );
  fecha:Date = new Date();

}

app.component.html

<div class="container">

  <br>

  <h1>Pipes</h1>

  <hr>

  <table class="table">

    <thead class="thead-dark">

      <tr>

        <th scope="col">Variable</th>

        <th scope="col">Pipe</th>

        <th scope="col">Producto</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td> {{ nombre }} </td>

        <td> uppercase </td>

        <td> {{ nombre | uppercase }} </td>

      </tr>

      <tr>

        <td> {{ nombre }} </td>

        <td> lowercase </td>

        <td> {{ nombre | lowercase }} </td>

      </tr>

      <tr>

        <td> {{ nombre }} </td>

        <td> slice:3 </td>

        <td> {{ nombre | slice:3 }} </td>

      </tr>

      <tr>

        <td> {{ nombre }} </td>

        <td> slice:0:3 </td>

        <td> {{ nombre | slice:0:3 }} </td>

      </tr>

      <tr>

        <td> {{ arreglo }} </td>

        <td> slice:1:5 </td>

        <td> {{ arreglo | slice:1:5 }} </td>

      </tr>

      <tr>

        <td> {{ PI }} </td>

        <td> number </td>

        <td> {{ PI | number }} </td>

      </tr>

      <tr>

        <td> {{ PI }} </td>

        <td> number:'1.0-2' </td>

        <td> {{ PI | number:'1.0-2' }} </td>

      </tr>

      <tr>

        <td> {{ a }} </td>

        <td> percent </td>

        <td> {{ a | percent }} </td>

      </tr>

      <tr>

        <td> {{ a }} </td>

        <td> percent:'2.2-2' </td>

        <td> {{ a | percent:'2.2-2' }} </td>

      </tr>

      <tr>

        <td> {{ salario }} </td>

        <td> currency </td>

        <td> {{ salario | currency }} </td>

      </tr>

      <tr>

        <td> {{ salario }} </td>

        <td> currency:'EUR' </td>

        <td> {{ salario | currency:'EUR' }} </td>

      </tr>

      <tr>

        <td> {{ salario }} </td>

        <td> currency:'EUR':false </td>

        <td> {{ salario | currency:'EUR':false }} </td>

      </tr>

      <tr>

        <td> {{ salario }} </td>

        <td> currency:'EUR':true:'4.0-0' </td>

        <td> {{ salario | currency:'EUR':true:'4.0-0' }} </td>

      </tr>

      <tr>

        <td> {{ salario }} </td>

        <td> number:'.2-2' </td>

        <td> {{ salario | number:'.2-2' }} </td>

      </tr>

      <tr>

        <td> {{ valorDePromesa }} </td>

        <td> async </td>

        <td> {{ valorDePromesa | async }} </td>

      </tr>

      <tr>

        <td> {{ fecha }} </td>

        <td> date </td>

        <td> {{ fecha | date }} </td>

      </tr>

      <tr>

        <td> {{ fecha }} </td>

        <td> date:'medium' </td>

        <td> {{ fecha | date:'medium' }} </td>

      </tr>

      <tr>

        <td> {{ fecha }} </td>

        <td> date:'MMMM - dd' </td>

        <td> {{ fecha | date:'MMMM - dd' }} </td>

      </tr>

    </tbody>

  </table>

  <h4>Slice</h4>

  <ul>

    <li *ngFor="let item of arreglo | slice:5:20"> {{ item }} </li>

  </ul>

  <h4>JSON</h4>

  <pre> {{ heroe | json }} </pre>

</div>

Si levantamos la aplicación, obtenemos como resultado la siguiente tabla, en la que se ve claramente el efecto de cada Pipe sobre cada variable:

Y eso es todo. Hay más Pipes que se pueden obtener de la documentación oficial de Angular.

Angular: 12. @Output. Pasar un evento de un componente hijo a uno padre

Esta vez vamos a ver el caso contrario, pasar información de un componente hijo a su pcomponente padre.

Hay que hacer una distinción. En la entrada anterior, cuando pasamos información de un padre a su hijo, estábamos pasando parámetros, es decir, variables con cierta información.
Ahora que vamos a pasar información de un hijo a su padre, lo que vamos a pasar es un evento, dentro del cual incluiremos las variables que queramos, en lugar de pasar las variables directamente.

En nuestra aplicación, tras separar los componentes de lista de tarjetas (padre) de la tarjeta en sí (hijo), nos ha quedado una función "verHeroe" en el componente tarjeta que es la que muestra el detalle del héroe.
Lo que vamos a hacer es cambiar de lugar esa funcionalidad y que se encargue el padre de mostrar el detalle del héroe seleccionado. Es decir, vamos a hacer que, al hacer click en el detalle de una tarjeta, el identificador del héroe seleccionado viaje al componente padre (la lista de tarjetas) y que desde allí se llame a la función "verHeroe" que nos muestre el detalle.

Lo primero que vamos a hacer es copiar la función "verHeroe" del fichero "heroe-tarjeta.component.ts" (hijo) y pegarla en el fichero "heroes.component.ts". Después comentamos el contenido de la función "verHeroe" del fichero "heroe-tarjeta.component.ts".
Ahora para ver el detalle del héroe necesitamos llamar a la función del componente padre (lista de héroes) desde el componente hijo (héroe en sí).

Para hacerlo, modificamos la parte TypeScript del componente hijo como sigue:

Como se puede ver, primero hemos importado el Output y el EventEmitter del @Angular/core.
Después hemos creado una variable "heroeSeleccionado" que es de tipo "EventEmitter" y que va a emitir un dato de tipo numérico. Lleva el "@Output" delante para indicar que lo vamos a enviar.
A continuación inicializamos la variable en el constructor de la clase.
Por último, en la función "verHeroe", tras comentar la línea anterior, hacemos que se envíe el evento "heroeSeleccionado" y que se lleve consigo la variable "index" de tipo numérico que ya se encontraba en la clase antes (está señalada en la captura con una flecha) y que indica el héroe seleccionado.

Con esto hecho, cada vez que pulsemos el botón detalle de uno de los héroes, estamos enviando al componente padre la información de qué héroe ha sido pulsado. Ahora debemos hacer que el componente padre recoja correctamente la información y lance la función adecuada.

Para ello modificamos el componente html del padre ("heroes.component.html") como sigue:

Como se puede ver, dentro de la etiqueta del componente hijo hemos incluido un nuevo escuchador de eventos llamado "heroeSeleccionado" (mismo nombre que le dimos al evento en el componente hijo), que llamará a la función "verHeroe" DEL COMPONENTE PADRE, y que le pasará como parámetro una variable "$event", que se corresponde con la variable "index" del componente hijo.

Y con esto sería todo. La función "verHeroe" debería mostrar el detalle del héroe seleccionado tal y como lo teníamos anteriormente.