angular 9 ngx-bootstrap dynamic tabs

[Tom Lee]

Hi All,

I have a component where I subscribe to BehaviorSubject (data array). When the subject changes, I create a tab for each item in the array of data items. The logic works fine, but the dynamic array of tabs will not be visible until I physically click on the component. If I create a static tab as the first tab, the new dynamic tabs are still not displayed until I click on the component..  Code snippet follows. Any suggestions will be appreciated.

Thanks,

Tom

    ngOnInit() {

        this.data.currentMessage.subscribe((message) => {

            this.companyData = message;

            // remove previous tabs

            this.removeAll();

            let count = 0;

            for (const company of this.companyData) {

                this.addNewTab(

                    company.companyName,

                    company.sicDesciption,

                    count === 0 ? true : false

                );

                count++;

            }

        });

    }

    addNewTab(

        companyName: string,

        description: string,

        activate: boolean

    ): void {

        const newTabIndex = this.tabs.length + 1;

        this.tabs.push({

            title: companyName,

            content: description,

            disabled: false,

            removable: true,

            active: activate

        });

    }

<div (click)="$event.preventDefault()">

    <div class="tab-panel">

        <tabset id="TEST" class="search-tabset" #searchResultTabs>

            <tab heading="Static tab experiment">Blah blau</tab>

            <tab

                *ngFor="let t of tabs"

                [heading]="t.title"

                [active]="t.active"

                (deselect)="t.active = false"

                [disabled]="t.disabled"

                [removable]="t.removable"

                (removed)="removeTabHandler(t)"

                [customClass]="t.customClass"

            >

                {{ t?.content }}

            </tab>

        </tabset>

    </div>

</div>