Ajout de la Team avec une liste Horizontale

HPFront/src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, Pipe } from '@angular/core';
 
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { HttpClientModule }    from '@angular/common/http';
 import {InMemoryDataService} from './in-memory-data.service';
 
 
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CharacterDetailComponent } from './character-detail/character-detail.component';
 import { CharacterComponent } from './character/character.component';
-import { from } from 'rxjs';
 import { ItemComponent } from './item/item.component';
 import { ItemDetailComponent } from './item-detail/item-detail.component';
 

HPFront/src/app/character/character.component.css

+ul {
+    padding:0;
+    margin:0;
+    list-style-type:none;
+    }
+   li {
+    margin-left:2px;
+    border-left: #696969; /*pour IE*/
+    }
+    ul li a {
+        display:block;
+        float: left;   
+        width:100px;
+        line-height:50px; /*hauteur de l'image de fond*/
+        background:	#008B8B repeat-x;
+        color:white;
+        text-decoration:none;
+        text-align:center;
+        margin: .1em;
+        border-radius: 10%;
+        }
+    ul li a:hover {
+        background:	#AFEEEE repeat-x;
+        color:black;
+        }
+h3{
+    color: #696969;
+    
+}
\ No newline at end of file

HPFront/src/app/character/character.component.html

 <h1>{{player.name}}</h1>
 <div><span>life : </span>{{player.life}} <span> / </span> {{player.max_life}}</div>
 <div><span>mana : </span>{{player.mana}} <span> / </span> {{player.max_mana}}</div> 
-<p>Team:</p>
-<ul class="team">
+
+<ul class="team">Team :
     <li *ngFor="let character of team">
         <a routerLink = "/characterdetail/{{character.id}}">
             <span class="badge">{{character.name}}</span>

HPFront/src/app/in-memory-data.service.ts

@@ -12,7 +12,8 @@ export class InMemoryDataService implements InMemoryDbService {
     const player = { id:0, name: "toto", life: 100, mana:100, max_life: 100, max_mana: 100};
     const characters = [
       { id: 1, name: "Harry Potter", life: 100, mana: 100, max_life: 100, max_mana: 100},
-      { id: 2, name: "Croc mou", life: 150, mana: 100, max_life: 150, max_mana: 100 }
+      { id: 2, name: "Croc mou", life: 150, mana: 100, max_life: 150, max_mana: 100 },
+      { id: 3, name: "Ron Weealay", life: 90, mana: 110, max_life:90, max_mana: 110 }
     ];
   
     const inventory = [