ng-pokemon-app/src/app/pokemon/detail-pokemon/detail-pokemon.component.html

59 lines
1.7 KiB
HTML

<div *ngIf="pokemon" class="row">
<div class="col s12 m8 offset-m2">
<h2 class="header center">{{ pokemon.name }}</h2>
<div class="card horizontal hoverable">
<div class="card-image">
<img [src]="pokemon.picture" />
</div>
<div class="card-stacked">
<div class="card-content">
<table class="bordered striped">
<tbody>
<tr>
<td>Nom</td>
<td>
<strong>{{ pokemon.name }}</strong>
</td>
</tr>
<tr>
<td>Points de vie</td>
<td>
<strong>{{ pokemon.hp }}</strong>
</td>
</tr>
<tr>
<td>Dégâts</td>
<td>
<strong>{{ pokemon.cp }}</strong>
</td>
</tr>
<tr>
<td>Types</td>
<td>
<span
*ngFor="let type of pokemon.types"
class="{{ type | pokemonTypeColor }}"
>{{ type }}</span
>
</td>
</tr>
<tr>
<td>Date de création</td>
<td>
<em>{{ pokemon.created | date : "yyyy-MM-dd" }}</em>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-action">
<a (click)="goToPokemonList()">Retour</a>
<a (click)="goToEditPokemon(pokemon)">Modifier</a>
<a (click)="deletePokemon(pokemon)">Supprimer</a>
</div>
</div>
</div>
</div>
</div>
<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>