Step 12.20: Implement showPicture method

client/imports/pages/messages/messages.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ElementRef } from '@angular/core';
-import { NavParams, PopoverController } from 'ionic-angular';
+import { NavParams, PopoverController, ModalController } from 'ionic-angular';
 import { MeteorObservable } from 'meteor-rxjs';
 import { _ } from 'meteor/underscore';
 import * as Moment from 'moment';
@@ -9,6 +9,7 @@ import { Chat, Message, MessageType, Location } from '../../../../imports/models
 import { PictureService } from '../../services/picture';
 import { MessagesAttachmentsComponent } from './messages-attachments';
 import { MessagesOptionsComponent } from './messages-options';
+import { ShowPictureComponent } from './show-picture';
 import template from './messages.html';
 
 @Component({
@@ -31,7 +32,8 @@ export class MessagesPage implements OnInit, OnDestroy {
     navParams: NavParams,
     private el: ElementRef,
     private popoverCtrl: PopoverController,
-    private pictureService: PictureService
+    private pictureService: PictureService,
+    private modalCtrl: ModalController
   ) {
     this.selectedChat = <Chat>navParams.get('chat');
     this.title = this.selectedChat.title;
@@ -266,4 +268,12 @@ export class MessagesPage implements OnInit, OnDestroy {
       zoom: Math.min(splitted[2] || 0, 19)
     };
   }
+
+  showPicture({ target }: Event) {
+    const modal = this.modalCtrl.create(ShowPictureComponent, {
+      pictureSrc: (<HTMLImageElement>target).src
+    });
+
+    modal.present();
+  }
 }