Angular ngbootstrap select tabs programmatically at page load

Question

In my Angular 2 I'm implementing the navigation tabs from ngbootstrap. At loading time I want to change the active tab. So now by default the 'Offers' tab is set active. With the 'select' method I want to set the 'Orders' tab as active.

@ViewChild('tabs')
private tabs: NgbTabset;

With this.tabs.select("Orders"); in OnInit/AfterContentInit the tabset is not yet rendered and in OnAfterViewInit I got the error Expression has changed after it was checked. Previous value: 'true'. Current value: 'false', because the DOM element is already rendered and cannot be changed.

<ngb-tabset #tabs id="detailTab">
<ngb-tab id="Offers" title="Offers">
<ng-template ngbTabContent>
  <br />
  <div class="row">
    <table class="table" *ngIf="_offers; else nooffers">
      <tr>
        <th></th>
        <th>Offer number</th>
        <th>When/who created</th>
        <th>Price</th>
        <th>#Del weeks</th>
      </tr>
      <tr *ngFor='let offer of _offers'>
        <td style="padding: 10px"><button id="detail" (click)="clicked(offer)" [routerLink]="['/offers', offer.salnr]" title="Detail offers" class="glyphButton"><span class="glyphicon glyphicon-search"></span></button></td>
        <td>{{ offer.salnr }}</td>
        <td>{{ offer.WhenWhoCreated }}</td>
        <td>{{ offer.price }} {{ offer.pricecurrency }}</td>
        <td>{{ offer.delweeks }}</td>
      </tr>
    </table>
    <ng-template #nooffers>No offers</ng-template>
  </div>
</ng-template>
</ngb-tab>
<ngb-tab id="Orders" title="Orders">
<ng-template ngbTabContent>
  <br />
  <div class="row">
    <table class="table" *ngIf="_orders; else noorders">
      <tr>
        <th></th>
        <th>Order number</th>
        <th>When/who created</th>
        <th>Price</th>
        <th>Backorder</th>
        <th>Available</th>
        <th>Partial delivery</th>
        <th>Expected Del Date</th>
      </tr>
      <tr *ngFor='let order of _orders'>
        <td style="padding: 10px"><button id="detail" (click)="clicked(order)" [routerLink]="['/orders', order.salnr]" title="Detail orders" class="glyphButton"><span class="glyphicon glyphicon-search"></span></button></td>
        <td><a href='{{ _linkToOrder }}{{_clientNr}}'>{{ order.salnr }}</a></td>
        <td>{{ order.WhenWhoCreated }}</td>
        <td>{{ order.price }} {{ order.pricecurrency }}</td>
        <td>{{ order.backorder }}</td>
        <td>{{ order.isAVAIL }}</td>
        <td>{{ order.partialdeliv }}</td>
        <td>{{ order.expdeldate }}</td>
      </tr>
    </table>
    <ng-template #noorders>No orders</ng-template>
  </div>
</ng-template>

Yoni Affuta Yoni Affuta · Accepted Answer · 2017-11-08T12:14:38

Im not sure if this is the best practice or not but in order to get rid of that error you can inject ChangeDetectorRef in your constructor and call ChangeDetectorRef.detectChanges() in your ngAfterContentInit lifecycle hook.

  constructor(private _cdRef: ChangeDetectorRef) {}
  
  ngAfterViewInit() {
    this._cdRef.detectChanges();
  }

SOLUTION EDIT

Integrating this answer solved the problem. The AfterViewInit now looks like this:

ngAfterViewInit()
{
  if (sessionStorage.getItem("activeTab")) {
    this.tabs.select(sessionStorage.getItem("activeTab"));
    this.ref.detectChanges();
  }
}

Angular ngbootstrap select tabs programmatically at page load

1 Answers