10+ Angular 2/4 Image Gallery Demos

Here are some Angular 2/4 Image Gallery DemosĀ including some responsive image galleries designed in high resolution to help you build your next awesome Angular app. You might be looking to create a carousel image gallery with a bigger picture modal to open when you click on an image thumbnail. If so, then you’re in the right place. Enjoy!

1. ng-image-gallery

ng-image-gallery
ng-image-gallery

Basic Angular 2 image gallery.

Demo Code

2. Angular 2 Carousel Gallery

Angular 2 Carousel Gallery
Angular 2 Carousel Gallery

Angular 2 carousel is a component used to show elements in a circular way. Angular 2 carousel allows us to create a Slideshow.

Demo

3. Angular2 Image Gallery Demo

Angular2 Image Gallery Demo
Angular2 Image Gallery Demo

Responsive image gallery designed for high resolution images. The project consists of a gallery, a viewer and a script for image preparation.

Demo Code

4. Angular2 Gallery ngx Demo

Angular2 Gallery ngx Demo
Angular2 Gallery ngx Demo

Angular 2+ image gallery plugin.

Demo Code

5. Angular 2 Modal Gallery Demo

Angular 2 Modal Gallery Demo
Angular 2 Modal Gallery Demo

Minimal and simple modal gallery example.

Tutorial

6. Lazy Loading Images in Angular 2

Lazy Loading Images in Angular 2
Lazy Loading Images in Angular 2

The trick was wrapping bLazy initialization inside a setTimeout() which seems to be the only way for bLazy to properly set itself up.

Tutorial Code

7. Nano Gallery

Nano Gallery
Nano Gallery

nanoGALLERY is a touch enabled and fully responsive image gallery with justified, cascading and grid layout. It supports self hosted images and pulling in Flickr, Google Photos and Google+ photo albums.

Examples

8. Responsive Carousel Component with Angular 2

Responsive Carousel Component with Angular 2
Responsive Carousel Component with Angular 2

A component is basically just a grouping of HTML/JS/CSS all in one.

Tutorial Demo

9. Angular 2 Firebase Image Upload Demo

Angular 2 Firebase Image Upload Demo
Angular 2 Firebase Image Upload Demo

This project is an Angular2 demo to show how to use Firebase Storage to upload images in Firebase and how to use Firebase Realtime Database to see in real time the files that are uploaded.

Tutorial Demo

10. Angular 2 Example with Fancy Grid

Angular 2 Example with Fancy Grid
Angular 2 Example with Fancy Grid

FancyGrid have built an Angular directive wrapped around our grid library: FancyGrid-AngularJS Directive.

Tutorial

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *