Попытка динамического создания слайдов в angular карусели на основе размера массива

Question

В настоящее время я пытаюсь динамически создавать слайды карусели на основе количества элементов в массиве, используя для l oop.

это текущий carousel.component. html

<div id="MyCarousel" class="carousel slide inner center" data-interval="3000" data-ride="carousel">
<ol class="carousel-indicators">
  <li data-target="#MyCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#MyCarousel" data-slide-to="1"></li>
  <li data-target="#MyCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" *ngFor='let i of images'>
  <div class="item" [ngClass]="{'active': i=='1011'}">
    <img src='https://picsum.photos/id/{{i}}/900/500'>
  </div>
</div>

<a class="left carousel-control" href="#MyCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#MyCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>

это мой carousel.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.ts',
  styleUrls: ['./carousel.component.css']
})
export class Carousel implements OnInit {
  images = [944, 1011, 984];


  constructor() { }

  ngOnInit() {
  }

}

Как сейчас я думаю, что проблема заключается в активном классе, прежде чем я попытался использовать ngClass, элемент div slide был просто class = "item active", который просто показывал все слайды одновременно, сложенные вертикально. с [ngClass] = "{'active': i == '1011'}" он показывает только один слайд как активный, но другие слайды, я полагаю, не существуют, так как нажатие на левый и правый шеврон не меняет слайды .

Кстати, я не сделал ни одного css для этого.

edit: Просто чтобы добавить, я использую bootstrap версию 3.4.1