Fin section 8 : pipes

This commit is contained in:
Lucien Cartier-Tilet 2023-02-24 10:57:57 +01:00
parent b602d08e2d
commit a876a3e70b
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
3 changed files with 58 additions and 2 deletions

View File

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

View File

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

View File

@ -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;
}
}