Step 7.7: Define component's method to open options

client/imports/pages/chat/messages-page.component.ts

@@ -1,12 +1,13 @@
 import {Component, OnInit, OnDestroy} from "@angular/core";
-import {NavParams} from "ionic-angular";
+import {NavParams, PopoverController} from "ionic-angular";
 import {Meteor} from 'meteor/meteor';
 import {Chat} from "../../../../both/models/chat.model";
 import {Messages} from "../../../../both/collections/messages.collection";
 import {Observable, Subscription} from "rxjs";
 import {Message} from "../../../../both/models/message.model";
 import template from "./messages-page.component.html";
 import style from "./messages-page.component.scss";
+import {MessagesOptionsComponent} from './messages-options.component';
 import {MeteorObservable} from "meteor-rxjs";
 
 @Component({
@@ -25,7 +26,10 @@ export class MessagesPage implements OnInit, OnDestroy {
   private message = "";
   private autoScroller: Subscription;
 
-  constructor(navParams: NavParams) {
+  constructor(
+    navParams: NavParams,
+    private popoverCtrl: PopoverController
+  ) {
     this.selectedChat = <Chat>navParams.get('chat');
     this.title = this.selectedChat.title;
     this.picture = this.selectedChat.picture;
@@ -70,6 +74,16 @@ export class MessagesPage implements OnInit, OnDestroy {
     return this.messagesList.querySelector('.scroll-content');
   }
 
+  showOptions(): void {
+    const popover = this.popoverCtrl.create(MessagesOptionsComponent, {
+      chat: this.selectedChat
+    }, {
+      cssClass: 'options-popover'
+    });
+
+    popover.present();
+  }
+
   ngOnDestroy() {
     if (this.autoScroller) {
       this.autoScroller.unsubscribe();