ngx-bootstrap Active tab not being recognized on compile

In my project, I have 2 tabs at the moment and currently using ngx-bootstrap. The first tab is being set as active but when compiling or refreshing the browser, it only becomes active after I first click on the second tab and then click back on the first one. And I just can not understand why. There are no scss styles in the project interfering with it, ngx-bootstrap is correctly imported etc. The issue has got to be within the typescript or html I feel, or maybe missing logic

<app-page-title title="Dashboard"
[breadcrumbItems]="breadCrumbItems"></app-page-title>

<div class="summary-table-card dashboard-container mt-4">

<div class="row">
<!-- To Do List -->
<div class="col-md-5">
<div class="container-fluid">
<div class="form-group">
<tabset [justified]="true"
class="nav-tabs nav-link-sm">
<tab [active]="true">
<ng-template tabHeading
class="mb-2">
<span class="d-block d-sm-none"><i class="fas fa- plus"></i></span>
<span class="d-none d-sm-block notification- label">tab one</span>
</ng-template>
<div class="tab-page-content">
<div class="mt-4">
<div class="d-flex align-items-center mb-4">
Content One
</div>
</div>

</div>
</tab>
<tab>
<ng-template tabHeading class="mb-2">
<span class="d-block d-sm-none"><i class="fas fa- file-export"></i></span>
<span class="d-none d-sm-block notification- label">tab two</span>
</ng-template>
<div class="tab-page-content">
<div class="form-group">
content two
</div>
</div>
</tab>
</tabset>
</div>
</div>
</div>


ts code:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-default',
templateUrl: './default.component.html',
styleUrls: ['./default.component.scss'],
})
export class DefaultComponent {
public breadCrumbItems: any[] = [];
public currentDateTime: Date = new Date();
public dashboardList: any;

constructor(private translateService: TranslateService) {}

ngOnInit(): void {
this.loadBreadcrumbs();
setInterval(() => {
this.currentDateTime = new Date();
}, 60000);

}

loadBreadcrumbs(): void {
this.translateService
.get(['text', 'text'])
.subscribe((translations) => {
this.breadCrumbItems = [
{ label: translations['text'] },
];
});
}
}

Continue reading...