title: Open Modal with images
body: <p>I am very new in ionic.</p>
  
  <p>I am making a basic ionic application which has list of users with user name and image (which is array).</p>
  
  <p><strong>Ts:</strong></p>
  
  <pre><code>  users = [
      {
        "name": "First User",
        "image": [
          "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
        ]
      },
      {
        "name": "Second User",
        "image": [
          "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
        ]
      },
      {
        "name": "Third User",
        "image": [
          "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
        ]
      },
    ]
  </code></pre>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;div *ngFor="let user of users"&gt;
      &lt;span&gt; {{ user.name }} &lt;/span&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  &lt;button ion-button type="button" (click)="openDocument(user.image)"&gt; View Image &lt;/button&gt;
      &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Working example:</strong> <a href="https://stackblitz.com/edit/ionic-1tzycv" rel="nofollow noreferrer">https://stackblitz.com/edit/ionic-1tzycv</a></p>
  
  <p>In the above given example i have a button with <code>View Image</code> and on click over the button i am in the need to display the images in modal one by one with next and previous button.</p>
  
  <p>I have searched for various sources but able to get loading of separate page alone in modal like,</p>
  
  <pre><code>this.modalCtrl.create(SomePage, {}, { enableBackdropDismiss: false }).present();
  </code></pre>
  
  <p>How to display the images which is array (means that user has lots of images to display)? On click the view image modal needs to get opened and the images of that user needs to be displayed one by one viewing each image on click next button in modal.</p>
  
  <p>Something like this in ref: <a href="https://codepen.io/anon/pen/NoGVGb" rel="nofollow noreferrer">https://codepen.io/anon/pen/NoGVGb</a> but i need it in angular 6 with ionic 3.</p>