Deactivate active Bootstrap Carousel item while looping - html

Question

This is my component.ts file, followed by the code for the Carousel:
`
public dummyData = [
{
title: '50 Cent',
text: 'Get Rich or Die Tryin'
},
{
title: 'Dr. Dre',
text: '2001'
},
{
title: 'Eminem',
text: 'Recovery'
},
{
title: '2pac',
text: 'All Eyez On Me'
},
{
title: 'The Notorious B.I.G',
text: 'Life After Death'
}
];
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" *ngFor="let dums of dummyData">
<div class="row">
<div class="card col-md" id="card">
<div class="card-body text-center">
<div class="hover-me">view on github</div>
<h4 class="card-title">{{dums.title}}</h4>
<div class="card-text">{{dums.text}}</div>
</div>
</div>
<div class="card col-md">
<!-- not filled yet -->
</div>
<div class="card col-md">
<!-- not filled yet -->
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have an array of objects called 'dummyData', and the code above must create carousel items(with three boxes each), as long as the array 'dummyData' has objects within.
But the problem is, when another item is created(after iteration over first three objects), it has the class 'active' too, due to which there the slider does not function.
Is there a way to remove an HTML class code after a few iterations in the ngFor loop?