Not actively maintained anymore

Unfortunately I don't have time to actively maintain my open source repos anymore. If anyone wants to take over, feel free to contact me, I'd be happy if this project still finds use.

ng2-image-gallery

Basic Angular 2 / 4 image gallery.
For compatibility with Angular 5 this issue would have to be resolved: #9

Demo

A simple demo is available as a plnkr: http://plnkr.co/edit/Qyg5m7XsiKCBpqa6I4ku?p=preview

Install

$ npm install ng2-image-gallery --save

Import the module

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2ImageGalleryModule } from 'ng2-image-gallery'; // <-- import the module
import { MyComponent } from './my.component';

@NgModule({
    imports: [BrowserModule,
              Ng2ImageGalleryModule // <-- include it in your app module
             ],
    declarations: [MyComponent],  
    bootstrap: [MyComponent]
})
export class MyAppModule {}

Import the styles

This library uses Bootstrap 4, so make sure to install that if you want the default styling to apply.

If you use Sass / Scss you can import the styles like so:

@import "{}/node_modules/ng2-image-gallery/ng2-image-gallery.scss";

alternatively just include the css file like this:

<link href="node_modules/ng2-image-gallery/ng2-image-gallery.css" rel="stylesheet" />

Usage

Use it in your template

<ng2-image-gallery [images]="myImages"></ng2-image-gallery>

whereas "myImages" is an Array of objects that by default would have the following properties:

export interface ImageInterface {
    thumbnail?: any; //image src for the thumbnail
    image?: any; //image src for the image 
    text?: string; //optional text to show for the image
    [propName: string]: any;
}

You can, as it might be more comfortable for you because you have different naming for your properties already, provide different naming for the properties like so:

<ng2-image-gallery [images]="myImages" [asText]="'content'" [asThumbnail]="'mythumb'"></ng2-image-gallery>

User interaction

You can also add some user interaction to the image by simply providing an actionText.

<ng2-image-gallery [images]="myImages" [actionText]="'do something!'" (onAction)="doSomething($event)"></ng2-image-gallery>

You can then style the button and listen to the onAction output event.

Draggable / sortable

For administration purposes it might be useful to make the thumbnails draggable so that you can change the order of images in a gallery. Simply set draggable="true" to do so.

<ng2-image-gallery [images]="myImages" [draggable]="true" (onDrop)="onDrop($event)"></ng2-image-gallery>

You can listen to the onDrop event, which will have a property images which contains the images in the current order.

Contribute

It would be awesome if someone had the time to make some improvements, like:

animations
limit to show only 10 thumbnails and then "+x more" etc.
allow usage of keys

Pull requests are much appreciated!

bergben/ng2-image-gallery