Skip to content
Image popup directive for angular2
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
app angualr 2.4.4 updated Jan 30, 2017
directives/angular2-image-popup angualr 2.4.4 updated Jan 30, 2017
LICENSE Initial commit Jun 22, 2016 readme changed to rc4 Aug 10, 2016
bower.json angualr2-iamge-popup-first commit Jun 22, 2016
package.json angualr 2.4.4 updated Jan 30, 2017
typings.json angualr2-iamge-popup-first commit Jun 22, 2016

Angular2 image popup

The sources for this package are in ( repo. Please file issues and pull requests against this repo.

Demo Output

angular2-image-popup popup ##Usage node install npm install angular2-image-popup bower install bower install image-popup ###1.In index.html page include following css ###2.component file use like below import {Component} from '@angular/core'; import {ImageModal} from '../directives/angular2-image-popup/image-modal-popup'; @Component({ selector : 'my-app', directives: [ImageModal], template: `

Example - Default

you can directly access "ImageModel" directive for both listing thumbnails and popup images

        <ImageModal [modalImages]="images"></ImageModal>
        <h2>  Example with thumbnail pointers </h2>
        <p> you can list images in your file and then calling "ImageModel" directive to show images on popup only</p>
        <div *ngFor="let img of images; let i= index"> 
          <div class="float-left" *ngIf="i <= 2" >
            <a class="more" *ngIf="i==2" (click)="OpenImageModel(img.img,images)"> +{{images.length - 3}} more </a> 
            <img class="list-img" src="{{img.thumb}}"(click)="OpenImageModel(img.img,images)" alt='Image' />
        <div *ngIf="openModalWindow">
          <ImageModal [modalImages]="images" [imagePointer] = "imagePointer" (cancelEvent) ="cancelImageModel()"></ImageModal>
  export class AppComponent {
    images = [
      { thumb: './app/assets/images/gallery/thumbs/img1.jpg', img: './app/assets/images/gallery/img1.jpg', description: 'Image 1' },
      { thumb: './app/assets/images/gallery/thumbs/img2.jpg', img: './app/assets/images/gallery/img2.jpg', description: 'Image 2' },
      { thumb: './app/assets/images/gallery/thumbs/img3.jpg', img: './app/assets/images/gallery/img3.jpg', description: 'Image 3' },
      { thumb: './app/assets/images/gallery/thumbs/img4.jpg', img: './app/assets/images/gallery/img4.jpg', description: 'Image 4' },
      { thumb: './app/assets/images/gallery/thumbs/img5.jpg', img: './app/assets/images/gallery/img5.jpg', description: 'Image 5' }
    constructor() {

   OpenImageModel(imageSrc,images) {
     var imageModalPointer;
     for (var i = 0; i < images.length; i++) {
            if (imageSrc === images[i].img) {
              imageModalPointer = i;
     this.openModalWindow = true;
     this.images = images;
     this.imagePointer  = imageModalPointer;
   cancelImageModel() {
     this.openModalWindow = false;
You can’t perform that action at this time.