Improve search page

src/app/pages/search/sender/sender.page.html

@@ -1,16 +1,21 @@
-<ion-header>
+<ion-header class="main-header">
+
+  <div class="icon" (click)="close()">
+    <ion-icon name="chevron-back" slot="start"></ion-icon>
+  </div>
+
   <ion-toolbar>
-    <ion-title (click)="close()">Remetentes</ion-title>
+    <ion-title>Remetentes</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
   <div class="main-container">
     <div class="input-text d-flex ion-align-items-center">
-      <ion-input class="search-input" type="search" placeholder="Pesquisar" (change)="filterContact($event)"></ion-input>
+      <ion-input [(ngModel)]='sender' class="search-input" type="search" placeholder="Pesquisar" (ngModelChange)="filterContact($event)" ></ion-input>
     </div>
     <ul>
-      <li *ngFor="let contact of showContacts">
+      <li *ngFor="let contact of showContacts" (click)="selectUser(contact.Name)">
         {{ contact.Name }}
       </li>
     </ul>

src/app/pages/search/sender/sender.page.scss

@@ -1,3 +1,18 @@
+.main-header{
+  display: flex;
+  align-items: center;
+}
+
+.icon{
+  color: #797979;
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  font-size: 25px;
+  align-items: center;
+}
+
 .main-container{
   padding: 0px 20px;
   .input-text {

src/app/pages/search/sender/sender.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { ContactsService } from 'src/app/services/contacts.service';
 import { EventPerson } from  'src/app/models/eventperson.model';
+
 @Component({
   selector: 'app-sender',
   templateUrl: './sender.page.html',
@@ -12,7 +13,8 @@ export class SenderPage implements OnInit {
 
   contacts: EventPerson[];
   showContacts: EventPerson[];
-
+  sender: string;
+  selectedUser: string;
 
   constructor(private modalController:ModalController,
     private ContactsService: ContactsService) { 
@@ -28,23 +30,29 @@ export class SenderPage implements OnInit {
       this.contacts = res;
     });
   }
+  
+  filterContact(){
 
-  filterContact(findName){
-    console.log(findName)
-    // const persons = this.contacts.filter((person) => {
+    const findPerson = this.sender.toLowerCase();
+    const persons = this.contacts.filter((person) => {
 
-      // if (person.Name.indexOf(findName) == 0){
-        // return true;
-      // }
+      if (person.Name.toLowerCase().indexOf(findPerson) == 0){
+       return true;
+      }
 
-    // });
-
-    // this.showContacts = persons;
+    });
 
+    this.showContacts = persons;
   }
 
-  close(){
-    this.modalController.dismiss();
+  selectUser(username:string){
+    console.log(username);
+    this.selectedUser = username;
+    this.close(this.selectedUser);
+  }
+
+  close(username: string){
+    this.modalController.dismiss(username);
   }
 
 }