How to Create an Image Gallery App with Angular

John Au-Yeung
JavaScript in Plain English
8 min readSep 21, 2019

Create a good looking photo app is easy with Angular. There are many libraries for adding photo slideshows most of which are easy to use. Also, displaying image in a neat way is easy with existing libraries like the Angular Material design’s grid.

In this story, we will build a photo gallery app with one page with search capability and infinite scroll and another page showing a slideshow of random photos. We will use Angular Material to take advantage of its good looking form elements and grid, and a slideshow library called ng-simple-slideshow to display a slideshow. It will have a menu on the left side. The source of our photos will be from the Pexels API. You need an API key to access the API for free by signing up for one at https://www.pexels.com/api/. It is limited to 200 API calls per hour, so don’t make too many requests.

To start building the app, we start by installing the Angular CLI by running npm i @angular/cli . After we installed it, we run ng new image-gallery to create a new Angular for our image gallery app. Also we create a flux store to store the menu’s state. Next we install the libraries for the app. We run npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store to install the libraries we need to display the photos and show the photo slideshow. Then we run ng add @ngrx/store to add the code for

Next we add skeleton code for the code we will write. We run the following commands to do this:

Create an account to read the full story.

Or, continue in mobile web

Already have an account? Sign in

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Responses (2)

What are your thoughts?