ngx-bootstrap tabs not being removed

Question

I am currently using a method similar to what is found at the demo site http://valor-software.com/ngx-bootstrap/index-bs4.html#/tabs#dynamic

My end goal is to have tabs that open for each record. Some records may have 1 tab and some records may have 10 tabs. It appears that the object is showing the correct number of tabs but the tabs are not being removed from the DOM.

Here is a snippet of my HTML page:

<tab *ngFor="let tabz of tabs; let i = index;"
  [heading]="tabz.title"
  [active]="tabz.active"
  (select)="tabz.active = true"
  (deselect)="tabz.active = false"
  [disabled]="tabz.disabled"
  [removable]="tabz.removable"
  (removed)="removeTabHandler(tabz)"
  [customClass]="tabz.customClass">

Here are some snippets of my TS page:

this.subscription = this.route.params.subscribe(
  (params: any) => {
    this.currentSelectedSite = params['id'];


    this.leaseTerminationService.fetchLeaseTerminationSite(this.currentSelectedSite)
      .subscribe(
        data => {
          const myArray = [];
          for (let key in data) {
            myArray.push(data[key]);
          }
          this.selectedLeaseTermination = myArray;
        }
      )


    //Make a call to get the SITE specific data for the selected site
    this.sitesService.getSite(this.currentSelectedSite)
      .subscribe(
        data => {
          const myArray = [];
          for (let key in data) {
            myArray.push(data[key]);

          }

          this.selectedSiteSite = myArray;
                }
      )

      //Make a call to get the LEASE specific data for the selected site
      this.leasesService.getLease(this.currentSelectedSite)
        .subscribe(
          data => {
            const myArray = [];
            for (let key in data) {
              myArray.push(data[key]);
            }

            this.selectedSiteLease = myArray;

          }
        )

        //Make a call to get the LEASE specific data for the selected site
        this.leasesService.getLeasesList(this.currentSelectedSite)
          .subscribe(
            data => {
              const myArray = [];
              for (let key in data) {
                myArray.push(data[key]);

              }

              this.selectedSiteLeases = myArray;

              // Set the count of tabs
              this.tabsCount = this.selectedSiteLeases.length;

              this.tabs = [];
              console.log('getLeasesList called');

              this.createTabs(this.selectedSiteLeases);

              // Set the first tab as the defaults after the tabs have been defined
              this.setActiveTab(0);
            }
          )

    }
  )
}

public createTabs(leases) {
    this.tabs = [];

     for (let key in leases) {
       this.tabs.push(
         {title: 'Lease ' + this.selectedSiteLeases[key].lease_id
         , content: this.selectedSiteLeases[key].renewal_latest_date }
       );
     }
   }

Is there anything obvious that I am missing here? Any ideas why this may not be removing the tabs that are showing on the page? The actual tab is still showing but if you click on it there is not content within it. On page reload only the correct tabs show or if you go to a different route and come back.

Here is a quick rundown of some of the tools I am using.

• Angular 4.1
• Bootstrap v4
• ngx-bootstrap 1.6.6
• font-awesome

Answer 1

I couldn't find any good solution for version 1.6.6.

This bug is fixed now for v1.7+.

I have tried with 1.8.1 and its working fine.

You can check it here