show profile picture in photo viewer

app/src/components/profile-header/profile-header.html

@@ -1,11 +1,10 @@
 <!-- Generated template for the ProfileHeaderComponent component -->
 <div>
   <div class="profile-banner" [style.background-image]="'url('+ banner +')'" [style.background-color]="'#' + user.profile_background_color">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
-      viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
       <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
     </svg>
-    <img src="{{ user.profile_image_url_https | highResolution }}" alt="{{ user.name }}" class="avatar">
+    <img src="{{ user.profile_image_url_https | highResolution }}" alt="{{ user.name }}" class="avatar" (click)="showProfilePicture()">
     <button ion-button color="primary" *ngIf="!user.following" (click)="follow(user.id_str)" class="follow-button">Follow</button>
     <button ion-button color="danger" *ngIf="user.following" (click)="unfollow(user.id_str)" class="follow-button">Unfollow</button>
   </div>

app/src/components/profile-header/profile-header.ts

@@ -1,12 +1,7 @@
 import { Component, Input } from "@angular/core";
 import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
+import { PhotoViewer } from "@ionic-native/photo-viewer";
 
-/**
- * Generated class for the ProfileHeaderComponent component.
- *
- * See https://angular.io/api/core/Component for more info on Angular
- * Components.
- */
 @Component({
   selector: "profile-header",
   templateUrl: "profile-header.html"
@@ -15,7 +10,10 @@ export class ProfileHeaderComponent {
   @Input()
   user: any;
 
-  constructor(private twitter: TwitterApiProvider) {}
+  constructor(
+    private twitter: TwitterApiProvider,
+    private photoViewer: PhotoViewer
+  ) {}
 
   get banner() {
     if (this.user.profile_banner_url) {
@@ -34,4 +32,14 @@ export class ProfileHeaderComponent {
     await this.twitter.destroyFriendship(userId);
     this.user.following = false;
   }
+
+  showProfilePicture() {
+    const profilePicutreHighResUrl = this.user.profile_image_url_https.replace(
+      "_normal",
+      ""
+    );
+    this.photoViewer.show(profilePicutreHighResUrl, this.user.name, {
+      share: true
+    });
+  }
 }