Create Image Gallery Using Angular 7

In this article, we will learn how we can create an image gallery using Angular and CSS.

Introduction 

 
Today, we will create a simple demo application to display the images and the preview of those images.
 
Create Image Gallery Using Angular 7
 
Prerequisites
  • Knowledge of Angular 2 or higher
  • Basic knowledge of TypeScript
  • Visual Studio Code
  • Node and NPM installed

Technologies we will use to build this demo 

  • Angular 7
  • Bootstrap
  • HTML and CSS
Step 1
 
Create an Angular project by using the following command.
 
ng new Imageedemo
 
Create Image Gallery Using Angular 7
 
Step 2
 
Open this project in Visual Studio Code.
 
Create Image Gallery Using Angular 7
 
Expand the src folder and right-click on the Assets folder. Add a new folder under it and rename that to 'Images'.
 
Create Image Gallery Using Angular 7
 
Now, open the Images folder and add some demo images to this folder. 
 
Create Image Gallery Using Angular 7
 
Step 3  
 
Now, open the integrated terminal by pressing Ctrl + ~.

Let's create a service to retrieve the images with the name 'image', by using the following command.

ng g service image 
 
Now, open the image.service.ts file and add the following code.
  1. import { Injectable } from '@angular/core'    
  2. @Injectable()    
  3. export class ImageService {    
  4.     allImages = [];    
  5.     
  6.     getImages() {    
  7.         return this.allImages = Imagesdelatils.slice(0);    
  8.     }    
  9.     
  10.     getImage(id: number) {    
  11.         return Imagesdelatils.slice(0).find(Images => Images.id == id)    
  12.     }    
  13. }    
  14. const Imagesdelatils = [    
  15.     { "id": 1, "brand""Apple""url""assets/Images/Macbook1.jpg" },    
  16.     { "id": 2, "brand""Apple""url""assets/Images/MacBook.jpg" },    
  17.     { "id": 3, "brand""Apple""url""assets/Images/laptop3.jpg" },    
  18.     { "id": 4, "brand""Apple""url""assets/Images/laptop4.jpg" },    
  19.     { "id": 5, "brand""hp""url""assets/Images/hp1.jpg" },    
  20.     { "id": 6, "brand""hp""url""assets/Images/hp2.jpg" },    
  21.     { "id": 7, "brand""hp""url""assets/Images/hp3.jpg" },    
  22.     { "id": 8, "brand""hp""url""assets/Images/hp4.jpg" },    
  23.     { "id": 9, "brand""Lenovo""url""assets/Images/laptop5.jpg" },    
  24.     { "id": 10, "brand""Lenovo""url""assets/Images/laptop7.jpg" },    
  25.     { "id": 11, "brand""Lenovo""url""assets/Images/laptop8.jpg" },    
  26.     { "id": 12, "brand""Lenovo""url""assets/Images/laptop9.jpg" },    
  27.     { "id": 13, "brand""Lenovo""url""assets/Images/laptop11.jpg" },    
  28.     { "id": 14, "brand""asus""url""assets/Images/laptop13.jpg" },    
  29.     { "id": 15, "brand""asus""url""assets/Images/laptop14.jpg" },    
  30.     { "id": 16, "brand""asus""url""assets/Images/laptop15.jpg" },    
  31.     { "id": 17, "brand""asus""url""assets/Images/laptop16.jpg" },    
  32.     { "id": 18, "brand""asus""url""assets/Images/laptop17.jpg" },    
  33.     { "id": 19, "brand""asus""url""assets/Images/laptop18.jpg" },    
  34.     { "id": 20, "brand""asus""url""assets/Images/laptop20.jpg" },    
  35.     
  36. ]    

Step 4

Now, create two components for displaying all imageslist and showing image preview, respectively. To create the components, open terminal and use the following commands.

ng g c ImageGallery
ng g c ImageDetails

Step 5
 
Now, open Image-Gallery.component.html and add the following HTML.
  1. <div>    
  2.   <div class="row">    
  3.     <div class="col-sm-12 btn btn-primary">    
  4.       Image Gallery    
  5.     </div>    
  6.   </div>    
  7.   <div class="row" style="margin-top:10px;margin-bottom: 10px;">    
  8.     <div class="col-sm-1">    
  9.     </div>    
  10.     <div class="col-sm-2">    
  11.       <button class="btn btn-success" (click)="filterBy='all'">All</button>    
  12.     </div>    
  13.     <div class="col-sm-2">    
  14.       <button class="btn btn-success" (click)="filterBy='Apple'">Apple</button>    
  15.     </div>    
  16.     <div class="col-sm-2">    
  17.       <button class="btn btn-success" (click)="filterBy='hp'">Hp</button>    
  18.     </div>    
  19.     <div class="col-sm-2">    
  20.       <button class="btn btn-success" (click)="filterBy='Lenovo'">Lenovo</button>    
  21.     </div>    
  22.     <div class="col-sm-2">    
  23.       <button class="btn btn-success" (click)="filterBy='asus'">Asus</button>    
  24.     </div>    
  25.     <div class="col-sm-1">    
  26.     </div>    
  27.   </div>    
  28.   <div class="row">    
  29.     <ul>    
  30.       <li *ngFor="let img of (allImages | filterimages:filterBy)">    
  31.         <a [routerLink]="['/image', img.id]">    
  32.           <img src="{{img.url}}" class="img" width="240" height="170">    
  33.         </a>    
  34.       </li>    
  35.     </ul>    
  36.   </div>    
  37. </div>    

Now, open ImageGallery.component.css and add the following lines.

  1. .img{      
  2.  margin:6px 6px;      
  3.  border4px solid #eee;      
  4.  box-shadow:rgb(2241991991px 1px 8px 1px;      
  5.  cursorpointer      
  6.     }      
  7. .modal-content {      
  8.   width1000px !important;      
  9. }      
  10. ul { padding:0width:1200pxmargin:20px auto;margin-left80px}      
  11. li { display:inline;}    
Now, open Image-Gallery.component.ts and add the following lines.
  1. import { Component, OnInit, Input, OnChanges } from '@angular/core';    
  2. import { ImageService } from './image.service';    
  3.     
  4. @Component({    
  5.   selector: 'app-imagegallery',    
  6.   templateUrl: './image-gallery.component.html',    
  7.   styleUrls: ['./image-gallery.component.css']    
  8. })    
  9.     
  10. export class GalleryComponent implements OnChanges {    
  11.   images:any[];    
  12.   filterBy?: string = 'all'    
  13.  allImages:any[] = [];    
  14.     
  15.   constructor(private imageService: ImageService) {    
  16.     this.allImages = this.imageService.getImages();    
  17.   }    
  18.   ngOnChanges() {    
  19.     this.allImages = this.imageService.getImages();    
  20.   }    
  21. }   
Step 6
 
Now, open Image-Details.component.html and add the following HTML.
  1. <div class="row">  
  2.   <div class=col-md-12>  
  3.     <div [ngStyle]="{'background-image':'url('+ image.url +')'}" class="img-container">  
  4.     </div>  
  5.   </div>  
  6. </div>  

Now, open Image-Details.component.css and add the following lines.

  1. .img-container{      
  2.     margin:13px;      
  3.     box-shadow: rgb(21131311px 2px 8px 1px;      
  4.     min-height600px;      
  5.     min-width800px;      
  6.     background-positioncenter;      
  7.     background-repeatno-repeat;      
  8.     align-contentcenter;      
  9. }  
Now, open Image-Details.component.ts and add the following lines.
  1. import { Component } from '@angular/core';    
  2. import { ImageService } from './image.service';    
  3. import { ActivatedRoute } from '@angular/router'    
  4.     
  5. @Component({    
  6.   templateUrl: './image-detail.component.html',    
  7.   styleUrls: ['./image-detail.component.css']    
  8. })    
  9. export class ImageDetailComponent {    
  10.   image:any    
  11.     
  12.   constructor(private imageService: ImageService,    
  13.     private route: ActivatedRoute) { }    
  14.     
  15.   ngOnInit(){    
  16.     thisthis.image = this.imageService.getImage(    
  17.       this.route.snapshot.params['id']    
  18.     )    
  19.   }    
  20. }    
Step 7
 
Now, create a custom pipe using the following command to filter the data.
 
ng g pipe filterimages
 
Now, open the filterimages.pipe.ts file and add the following lines.
  1. import { Pipe, PipeTransform } from '@angular/core';    
  2.     
  3. @Pipe({    
  4.   name: 'filterimages'    
  5. })    
  6. export class FilterimagesPipe implements PipeTransform {    
  7.   transform(items: any[], laptop: string): any {    
  8.     if(laptop === 'all'){ return items } else    
  9.     return items.filter(item =>{    
  10.       return item.brand === laptop;    
  11.     });    
  12.   }    
  13.     
  14. }   
Step 8
 
Open app.module.ts file and add the following code.
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { FormsModule } from '@angular/forms';    
  4. import { RouterModule } from '@angular/router';    
  5. import { ImageService } from './image.service';    
  6. import { AppComponent } from './app.component';    
  7. import { GalleryComponent } from './image-gallery.component';     
  8. import { ImageDetailComponent } from './image-detail.component';     
  9. import { appRoutes } from '../routes';    
  10. import { FilterimagesPipe  } from "./filterimages.pipe"    
  11.     
  12. @NgModule({    
  13.   declarations: [    
  14.     AppComponent,    
  15.     ImageGalleryComponent,     
  16.     ImageDetailComponent,    
  17.     FilterimagesPipe    
  18.   ],    
  19.   imports: [    
  20.     BrowserModule,    
  21.     FormsModule,    
  22.     RouterModule.forRoot(appRoutes)    
  23.   ],    
  24.   providers: [ImageService, FilterimagesPipe],    
  25.   bootstrap: [AppComponent]    
  26. })    
  27. export class AppModule { }    
Step 9
 
Open app.component.html file and add this line of code.
  1. <div>    
  2.   <router-outlet></router-outlet>    
  3. </div>    
Step 10
 
Now, run the project and check the result.
 
Create Image Gallery Using Angular 7
 
 Now, click on any button and check.
 
Create Image Gallery Using Angular 7
 
 Click on any image and check.
 
Create Image Gallery Using Angular 7
 

Summary

 
In this article, we learned how we can create an image gallery using Angular and CSS.