Fin section 8 : pipes
This commit is contained in:
parent
b602d08e2d
commit
a876a3e70b
@ -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>
|
||||
|
@ -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],
|
||||
|
49
src/app/pokemon-type-color.pipe.ts
Normal file
49
src/app/pokemon-type-color.pipe.ts
Normal 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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user