Step 5.35: Use the popover component

src/pages/chats/chats.ts

@@ -2,16 +2,17 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from "rxjs";
 import { Chat } from "api/models/whatsapp-models";
 import { Chats, Messages } from "api/collections/whatsapp-collections";
-import { NavController } from "ionic-angular";
+import { NavController, PopoverController } from "ionic-angular";
 import { MessagesPage } from "../messages/messages";
+import { ChatsOptionsComponent } from "../chat-options/chat-options";
 
 @Component({
   templateUrl: 'chats.html'
 })
 export class ChatsPage implements OnInit {
   chats;
 
-  constructor(private navCtrl: NavController) {
+  constructor(public navCtrl: NavController, public popoverCtrl: PopoverController) {
 
   }
 
@@ -33,6 +34,14 @@ export class ChatsPage implements OnInit {
       ).zone();
   }
 
+  showOptions(): void {
+    const popover = this.popoverCtrl.create(ChatsOptionsComponent, {}, {
+      cssClass: 'options-popover'
+    });
+
+    popover.present();
+  }
+
   showMessages(chat): void {
     this.navCtrl.push(MessagesPage, {chat});
   }