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 = [];
  6. getImages() {
  7. return this.allImages = Imagesdelatils.slice(0);
  8. }
  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" },
  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. border: 4px solid #eee;
  4. box-shadow:rgb(224, 199, 199) 1px 1px 8px 1px;
  5. cursor: pointer
  6. }
  7. .modal-content {
  8. width: 1000px !important;
  9. }
  10. ul { padding:0; width:1200px; margin:20px auto;margin-left: 80px}
  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';
  4. @Component({
  5. selector: 'app-imagegallery',
  6. templateUrl: './image-gallery.component.html',
  7. styleUrls: ['./image-gallery.component.css']
  8. })
  10. export class GalleryComponent implements OnChanges {
  11. images:any[];
  12. filterBy?: string = 'all'
  13. allImages:any[] = [];
  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(211, 31, 31) 1px 2px 8px 1px;
  4. min-height: 600px;
  5. min-width: 800px;
  6. background-position: center;
  7. background-repeat: no-repeat;
  8. align-content: center;
  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'
  5. @Component({
  6. templateUrl: './image-detail.component.html',
  7. styleUrls: ['./image-detail.component.css']
  8. })
  9. export class ImageDetailComponent {
  10. image:any
  12. constructor(private imageService: ImageService,
  13. private route: ActivatedRoute) { }
  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';
  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. }
  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"
  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.