Formateo en plantillas

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
app-module.ts  
import {BrowserModule} from '@angular/platform-browser';  
import {LOCALE_ID, NgModule} from '@angular/core';  
  
import {AppRoutingModule} from './app-routing.module';  
import {AppComponent} from './app.component';  
import {C10Component} from './components/c10/c10.component';  
  
import {registerLocaleData} from '@angular/common';  
import es from '@angular/common/locales/es';  
 
registerLocaleData(es);  
  
@NgModule({  
 declarations: [  
   AppComponent,  
 ],  
 imports: [  
   BrowserModule,  
   AppRoutingModule  
 ],  
 providers: [{provide: LOCALE_ID, useValue: 'es'}],  
 bootstrap: [AppComponent]  
})  
export class AppModule {  
} 

1. DecimalPipe

Este pipe se puede utilizar para adaptar el número a las preferencias del usuario para redondear, por ejemplo.

{{variable | number : adaptacion }} 

La adaptación contiene tres variables:

1. KeyValuePipe

Para la visualización, a veces es más fácil recorrer un array en lugar de un diccionario o un objeto. En efecto, *ngFor necesita un iterable para funcionar.

KeyValuePipe permite convertir fácilmente estos dos tipos en un array.

{{variable | keyvalue : comparador}} 

Por defecto, variable se ordenará en orden ascendente de los valores de sus claves. Si el objeto o diccionario es un elemento complejo, el comparador permite modificar el comportamiento de clasificación predeterminado.

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c11\c11.components.ts  
import {Component} from '@angular/core';  
  
@Component({  
 selector: 'app-c10',  
 template: `  
     <div class="container text-center">  
         <h2>El componente C10</h2>  
         <h3>Un objeto</h3>  
         <div *ngFor="let unElemento of unObjeto | keyvalue">  
             {{unElemento.key}} - {{unElemento.value}}  
         </div>  
     ...

1. SlicePipe

Este pipe se usa para seccionar un array o una cadena de caracteres en subpartes.

{{variable | slice : principio : fin}} 

El índice del primer elemento de un array o el primer carácter de una cadena de caracteres es 0, no 1. El número definido por fin no está incluido.

principio puede ser un número negativo. Luego contamos desde el final de la cadena de caracteres o la matriz.

{{’Adorable’ | slice :1:5}} mostrará «dora», ya que el carácter en el índice 1 es d y el carácter en el índice 5 es b, pero no está incluido.

Para un array, la lógica sigue siendo la misma. De hecho, una cadena de caracteres es solo una matriz de elementos.

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c11\c11.components.ts  
import {Component} from '@angular/core';  
  
@Component({  
 selector: 'app-c10',  
 template: `  
     <div class="container text-center">  
         <h2>El componente C10</h2>  
         <h3>Una cadena de carácteres</h3>  
         <div>{{ unaCadenaDeCaracteres...

1. JsonPipe

Este tubo se usa para mostrar un objeto usando el formato JSON (JavaScript Object Notation). De hecho, Angular no puede mostrar un objeto tal como está porque puede ser complejo. El formato JSON permite una lectura más fácil gracias a llaves y pares clave/valor.

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c11\c11.components.ts  
import {Component} from '@angular/core';  
  
@Component({  
 selector: 'app-c10',  
 template: `  
     <div class="container text-center">  
         <h2>El componente C10</h2>  
         <div>  
             <hr />  
             <p>Un objeto :</p>  
             <div>{{unObjeto}}</div>  
             <hr...

1. Enunciado

Desde la aplicación PokemonManager creada anteriormente, agregue una tabla que contenga varios Pokémon al componente pokemons.

Con la ayuda del framework CSS de Bulma, muestre una lista de Pokemon en la plantilla de componentes pokemons.

Muestre los pesos en kilogramos y las alturas en metros respetando la convención numérica española (separador de miles y coma para números decimales).

Si no se ingresa la talla o el peso de un Pokémon, muestre «N/A».

Visualización de los Pokémon y sus características

2. Corrección

El array Pokémon es un objeto JavaScript. Exactamente como el array que hemos visto en el capítulo Plantillas, se declara en la clase TypeScript del componente. 

Esta vez, cada Pokémon es un objeto, ya que contiene varias características.

// C:\JavaScriptYAngular\Angular\PokemonManager\src\app\ 
components\pokemons\pokemons.component.ts  
import { Component, OnInit } from '@angular/core';  
  
@Component({  
 selector: 'app-pokemons',  
 templateUrl: './pokemons.component.html',  
 styleUrls: ['./pokemons.component.css']  
})  
export class PokemonsComponent implements OnInit {  
  
 pokemon = [  
   {'id': 1, 'nombre': 'Bulbasaur', 'categoria': 'semilla', 'tipo': 
['planta', 'veneno'], 'talla': 0,70, 'peso': 6,9}, 
  {'id': 2, 'nombre': 'Ivysaur', 'categoria': 'semilla', 'tipo': 
['planta', 'veneno'], 'talla': 1, 'peso':...