Added a dynamic ngx-bootsrtrap carousel

src/app/carousels/carousels.component.html

@@ -27,3 +27,26 @@ <h3>Third slide label</h3>
     </div>
   </slide>
 </carousel>
+
+<carousel [(activeSlide)]="activeSlideIndex" >
+  <slide *ngFor="let slide of slides; let index=index">
+    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%; height: 100px; background: orange;">
+
+    <div class="carousel-caption">
+      <h4>Slide {{index}}</h4>
+      <p>{{slide.text}}</p>
+    </div>
+  </slide>
+</carousel>
+<br/>
+<div>
+  <button type="button" class="btn btn-info"
+          (click)="addSlide()">Add Slide
+  </button>
+  <button type="button" class="btn btn-info"
+          (click)="removeSlide()">Remove Current
+  </button>
+  <button type="button" class="btn btn-info"
+          (click)="removeSlide(2)">Remove #3
+  </button>
+</div>

src/app/carousels/carousels.component.ts

@@ -4,4 +4,24 @@ import { Component } from '@angular/core';
   selector: 'my-carousels',
   templateUrl: './carousels.component.html'
 })
-export class CarouselsComponent { }
+export class CarouselsComponent {
+  slides: { image: string }[] = [];
+  activeSlideIndex = 0;
+
+  constructor() {
+    for (let i = 0; i < 4; i++) {
+      this.addSlide();
+    }
+  }
+
+  addSlide(): void {
+    this.slides.push({
+      image: `assets/images/nature/${this.slides.length % 8 + 1}.jpg`
+    });
+  }
+
+  removeSlide(index?: number): void {
+    const toRemove = index ? index : this.activeSlideIndex;
+    this.slides.splice(toRemove, 1);
+  }
+}