Mise en forme dans les gabarits

// C:\JavaScriptEtAngular\Angular\monProjetAngular\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 './composants/c10/c10.component'; 
 
import {registerLocaleData} from '@angular/common'; 
import localeFR from '@angular/common/locales/fr'; 
registerLocaleData(localeFR); 
 
@NgModule({ 
 declarations: [ 
   AppComponent, 
 ], 
 imports: [ 
   BrowserModule, 
   AppRoutingModule 
 ], 
 providers: [{provide: LOCALE_ID, useValue: 'fr'}], 
 bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

1. DecimalPipe

Ce tube permet d’adapter le nombre aux préférences de l’utilisateur pour effectuer un arrondi par exemple.

{{variable | number : miseEnForme }} 

La mise en forme contient trois critères :...

1. KeyValuePipe

Pour l’affichage, il est parfois plus aisé de boucler sur un tableau plutôt que sur un dictionnaire ou un objet. En effet, *ngFor a besoin d’un itérable pour fonctionner.

KeyValuePipe permet aisément de convertir ces deux types en tableau.

{{variable | keyvalue : comparateur}} 

Par défaut, variable sera trié dans l’ordre croissant des valeurs de ses clés. Si l’objet ou le dictionnaire est un élément complexe, le comparateur permet de modifier le comportement par défaut de tri.

// C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c11\c11.components.ts 
import {Component} from '@angular/core'; 
 
@Component({ 
 selector: 'app-c10', 
 template: ` 
     <div class="container text-center"> 
         <h2>Le composant C10</h2> 
         <h3>Un objet</h3> 
         <div *ngFor="let unElement of unObjet | keyvalue"> 
             {{unElement.key}} - {{unElement.value}} 
         </div> 
         <h3>Un dictionnaire</h3> ...

1. SlicePipe

Ce tube permet de sectionner un tableau ou une chaîne de caractères en sous-parties.

{{variable | slice : debut : fin}} 

L’indice du premier élément d’un tableau et du premier caractère d’une chaîne de caractères est 0, et non pas 1. Le chiffre défini par fin n’est pas inclus dans la part du gâteau.

début peut être un nombre négatif. On compte alors à partir de la fin de la chaîne de caractères ou du tableau.

{{’Adorable’ | slice :1:5}} affichera dora puisque le caractère à l’index 1 est d et que celui à l’index 5 est b, mais il n’est pas inclus.

Pour un tableau, la logique reste la même. En effet, une chaîne de caractères n’est, en fait, qu’un tableau d’éléments.

// C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c11\c11.components.ts 
import {Component} from '@angular/core'; 
 
@Component({ 
 selector: 'app-c10', 
 template: ` 
     <div class="container text-center"> 
         <h2>Le composant C10</h2> 
         <h3>Une chaine de caractère</h3> ...

1. JsonPipe

Ce tube permet d’afficher un objet en utilisant le format JSON (JavaScript Object Notation). En effet, Angular n’est pas capable d’afficher un objet tel quel tant il peut être complexe. Le format JSON permet une lecture plus aisée grâce à des accolades et à des couples clé/valeur.

// C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c11\c11.components.ts 
import {Component} from '@angular/core'; 
 
@Component({ 
 selector: 'app-c10', 
 template: ` 
     <div class="container text-center"> 
         <h2>Le composant C10</h2> 
         <div> 
             <hr /> 
             <p>Un objet :</p> 
             <div>{{unObject}}</div> ...

1. Énoncé

À partir de l’application PokemonManager créée précédemment, ajoutez un tableau contenant des Pokémon au composant pokemons.

Avec l’aide du framework CSS Bulma, affichez une liste des Pokémon dans le gabarit du composant pokemons.

Affichez les poids en kilogrammes et les tailles en mètres en respectant la convention française des nombres (séparateur de milliers et virgule pour les nombres flottants).

Si la taille ou le poids d’un Pokémon n’est pas renseigné, affichez "N/A".

Affichage des Pokémon et de leurs caractéristiques

2. Correction

Le tableau des Pokémon est un objet JavaScript. Exactement comme le tableau des generations du chapitre Gabarits, il est déclaré dans la classe TypeScript du composant.

Cette fois-ci, chaque Pokémon est un objet puisqu’il contient plusieurs caractéristiques.

// C:\JavaScriptEtAngular\Angular\PokemonManager\src\app\
composants\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, 'nom': 'Bulbizarre', 'categorie': 'graine', 'type':  
['plante', 'poison'], 'taille': 0.70, 'poids': 6.9 }, 
   { 'id': 2, 'nom':...