mise en place du html et lien vers le back de repertoire

src/app/pages/page-repertoire/page-repertoire.component.html

@@ -1,2 +1,32 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<app-side-bar></app-side-bar>
+
+<div>
+    <button class="w-100 btn btn-lg btn-secondary " 
+        type="submit">Tous les contacts
+    </button>
+
+    <button class="w-100 btn btn-lg btn-rounded btn-secondary">
+        Ajouter un contact
+    </button>
+
+    <div class="input-group mb-3">
+        <input type="text" class="form-control" 
+            placeholder="Rechercher un contact" 
+            aria-label="Rechercher un contact" 
+            aria-describedby="basic-addon2"
+            #word
+            (keyup)="onSearchChange(word.value)">
+            
+        <div class="input-group-append">
+       <!--<button class="btn btn-secondary" type="button">Rechercher</button>--> 
+        </div>
+    </div>
+
+    <div *ngFor="let personne of listContact" (click)="onClick(personne)" >
+        <img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
+        <p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
+    </div>
+<div *ngIf="openDetails"><app-fiche-contact [personne]="openDetails"></app-fiche-contact></div>
+    
+</div>

src/app/pages/page-repertoire/page-repertoire.component.scss

@@ -0,0 +1,15 @@
+.btn-secondary {
+  color: #fff;
+  background-color: #5a1e63 !important;
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}
+
+.input-group mb-3 {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}

src/app/pages/page-repertoire/page-repertoire.component.ts

@@ -1,15 +1,50 @@
 import { Component, OnInit } from '@angular/core';
+import { RepertoireService } from 'src/app/services/repertoire.service';
 
 @Component({
   selector: 'app-page-repertoire',
   templateUrl: './page-repertoire.component.html',
-  styleUrls: ['./page-repertoire.component.scss']
+  styleUrls: ['./page-repertoire.component.scss'],
 })
 export class PageRepertoireComponent implements OnInit {
+  public listContact: any[];
+  public listFull: any[];
+  keyword: any;
+  openDetails: any;
 
-  constructor() { }
-
-  ngOnInit(): void {
+  constructor(private repertoireService: RepertoireService) {
+    this.listContact = [];
+    this.listFull = [];
   }
 
+  ngOnInit(): void {
+    this.repertoireService.getContact().subscribe((listContact: any[]) => {
+      console.log(listContact);
+      this.listContact = listContact;
+      this.listFull = listContact;
+    });
+  }
+
+  // Méthode pour récuper ce qui est saisi dans l'input
+  onSearchChange(prenom: string): void {
+    this.keyword = prenom;
+    if (prenom == '') {
+      this.listContact = this.listFull;
+    } else {
+      this.applyFilter(prenom);
+    }
+  }
+
+  // Méthode qui applique un filtre sur ce qui est récupéré de l'input sur le prénom
+  applyFilter(filter: any) {
+    let prenom = this.listFull.filter((contact) =>
+      contact.prenom.toLowerCase().includes(filter.toLowerCase())
+    );
+    this.listContact = prenom;
+  }
+
+  onClick(personne: any) {
+    console.log(personne);
+    this.openDetails = personne;
+  }
 }