add pipe component to filter array values

src/app/pages/chat/messages/contacts/contacts.module.ts

@@ -8,6 +8,7 @@ import { ContactsPageRoutingModule } from './contacts-routing.module';
 
 import { ContactsPage } from './contacts.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -15,6 +16,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
     FormsModule,
     IonicModule,
     SharedModule,
+    PipesModule,
     ContactsPageRoutingModule
   ],
   declarations: [ContactsPage]

src/app/pages/chat/messages/contacts/contacts.page.html

@@ -26,14 +26,14 @@
     </ion-refresher>
   <div class="main-content">
     
-    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">
         <ion-label>{{header}}</ion-label>
       </div>
 
       <div (click)="openMessages()" *virtualItem="let user" class="item-user">
-         <p>{{user.first}} {{user.last}}</p>
+         <p>{{user.name}}</p>
          <span class="icon">
           <ion-icon slot="end" name="ellipse"></ion-icon>
          </span>

src/app/pages/chat/messages/contacts/contacts.page.ts

@@ -1,6 +1,8 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
 import { GroupMessagesPage } from '../../group-messages/group-messages.page';
 import { MessagesPage } from '../messages.page';
 
@@ -11,77 +13,67 @@ import { MessagesPage } from '../messages.page';
 })
 export class ContactsPage implements OnInit {
   showLoader: boolean;
+  loggedUser: any;
   users = [];
 
   headers: HttpHeaders;
   options:any;
-
-  contacts: Contact[] = [
-    {
-      first: 'Ana',
-      last: 'Manuel',
-      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
-    },
-    {
-      first: 'Abdullah',
-      last: 'Hill',
-      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
-    },
-    {
-      first: 'Batur',
-      last: 'Oymen',
-      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
-    },
-    {
-      first: 'Bianca',
-      last: 'Costa',
-      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
-    },
-    {
-      first: 'Zaya',
-      last: 'Mary',
-      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
-    },
-    {
-      first: 'Tiago',
-      last: 'Kayaya',
-      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
-    }
-];
+  contacts:any;
+  textSearch:string;
 
   constructor(
     private modalController: ModalController,
     private http: HttpClient,
+    private chatService: ChatService,
+    private authService: AuthService,
   ) 
-  {  }
+  {  
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+    });
+    this.textSearch="";
+  }
 
   ngOnInit() {
     this.loadUsers();
 
   }
+  onChange(event){
+    this.textSearch = event.detail.value;
+  }
 
   loadUsers(){
     this.options = { 
       headers: this.headers,
     };
-    this.users = this.contacts.sort((a,b) => {
-      if(a.first < b.first){
-        return -1;
-      }
-      if(a.first > b.first){
-        return 1;
-      }
-      return 0;
+
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+      console.log(res.users);
+      
+      this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+
+      this.showLoader = false;
     });
+
+    
   }
 
   separateLetter(record, recordIndex, records){
     if(recordIndex == 0){
-      return record.first[0];
+      return record.name[0];
     }
 
-    let first_prev = records[recordIndex - 1].first[0];
-    let first_current = record.first[0];
+    let first_prev = records[recordIndex - 1].name[0];
+    let first_current = record.name[0];
 
     if(first_prev != first_current){
       return first_current;
@@ -95,9 +87,7 @@ export class ContactsPage implements OnInit {
   close(){
     this.modalController.dismiss();
   }
-  onChange(event){
-
-  }
+  
   clicked(){
     console.log('clicked');