Fin section 8 : pipes

src/app/app.component.html

@@ -17,8 +17,14 @@
               {{ pokemon.name }}
             </p>
             <p>
-              <small>{{ pokemon.created }}</small>
+              <small>{{ pokemon.created | date : "yyyy-MM-dd" }}</small>
             </p>
+            <span
+              *ngFor="let type of pokemon.types"
+              class="{{ type | pokemonTypeColor }}"
+            >
+              {{ type }}
+            </span>
           </div>
         </div>
       </div>

src/app/app.module.ts

@@ -4,9 +4,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BorderCardDirective } from './border-card.directive';
+import { PokemonTypeColorPipe } from './pokemon-type-color.pipe';
 
 @NgModule({
-  declarations: [AppComponent, BorderCardDirective],
+  declarations: [AppComponent, BorderCardDirective, PokemonTypeColorPipe],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],

src/app/pokemon-type-color.pipe.ts

@@ -0,0 +1,49 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pokemonTypeColor'
+})
+export class PokemonTypeColorPipe implements PipeTransform {
+  transform(type: string): string {
+    let color: string;
+    switch (type) {
+      case 'Feu':
+        color = 'red lighten-1';
+        break;
+      case 'Eau':
+        color = 'blue lighten-1';
+        break;
+      case 'Plante':
+        color = 'green lighten-1';
+        break;
+      case 'Insecte':
+        color = 'brown lighten-1';
+        break;
+      case 'Normal':
+        color = 'grey lighten-3';
+        break;
+      case 'Vol':
+        color = 'blue lighten-3';
+        break;
+      case 'Poison':
+        color = 'deep-purple accent-1';
+        break;
+      case 'Fée':
+        color = 'pink lighten-4';
+        break;
+      case 'Psy':
+        color = 'deep-purple darken-2';
+        break;
+      case 'Electrik':
+        color = 'lime accent-1';
+        break;
+      case 'Combat':
+        color = 'deep-orange';
+        break;
+      default:
+        color = 'grey';
+        break;
+    }
+    return 'chip ' + color;
+  }
+}