"test list pictures"

src/app/components/diapo/diapo.component.html

-<ngb-carousel *ngFor="let picture of pictures">
-  <ng-template ngbSlide>
-    <div class="picsum-img-wrapper">
-      <img [src]="picture.imagePath" alt="Random first slide">
-    </div>
-    <div class="carousel-caption">
-      <h3>First slide label</h3>
-      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-    </div>
-  </ng-template>
-  <ng-template ngbSlide>
-    <div class="picsum-img-wrapper">
-      <img [src]="picture.imagePath" alt="Random second slide">
-    </div>
-    <div class="carousel-caption">
-      <h3>Second slide label</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    </div>
-  </ng-template>
-</ngb-carousel>

src/app/components/pictures-list/pictures-list.component.html

 <h1>All Pictures</h1>
 <hr />
 <div *ngIf="pictures.length > 0">
-  <div *ngFor="let picture of pictures" class="picture">
-    <img [src]="picture.imagePath" [alt]="picture.name" />
-    <div>
-      <span>{{ picture.name }}</span>
-    </div>
-  </div>
+  <ul class="list-group">
+    <li
+      class="list-group-item"
+      *ngFor="let picture of pictures; let i = index"
+      [class.active]="i == currentIndex"
+      (click)="setActivePicture(picture, i)"
+      >
+      <img [src]="picture.imagePath" [alt]="picture.name" [class.active]="i == currentIndex"
+           (click)="setActivePicture(picture, i)"
+      />
+      {{picture.name}}
+    </li>
+  </ul>
 </div>

src/app/components/pictures-list/pictures-list.component.ts

@@ -11,6 +11,8 @@ import {PictureService} from "../../services/picture.service";
 export class PicturesListComponent implements OnInit, OnDestroy {
 
   pictures: Picture[] = [];
+  currentPicture: Picture = {};
+  currentIndex = -1;
 
   private pictureSubscription: Subscription | undefined;
 
@@ -25,6 +27,12 @@ export class PicturesListComponent implements OnInit, OnDestroy {
       });
   }
 
+  setActivePicture(picture: Picture, index: number): void {
+    this.currentPicture = picture;
+    this.currentIndex = index;
+  }
+
+
   ngOnDestroy(): void {
     this.pictureSubscription?.unsubscribe();
   }

src/app/models/picture.model.ts

-export interface Picture {
-  _id: string;
-  name: string;
-  imagePath: string;
+export class Picture {
+  _id?: string;
+  name?: string;
+  imagePath?: string;
 }