Fork of the ng-boostrap tabset to reproduce a ExpressionChangedAfterItHasBeenCheckedError

<!DOCTYPE html>
<html>

  <head>
  <base href="." />
    <title>ng-bootstrap demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <script src="https://unpkg.com/core-js@^2.4.1/client/shim.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.10/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.10/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@^0.1.8/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@^0.19.40/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app').catch(console.error.bind(console));
</script>
  </head>

  <body>
  <my-app>loading...</my-app>
  </body>

</html>

var ver = {
    ng: '4.0.3'
  };
  
  System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {

    'app': './src',

    '@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@' + ver.ng + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',

    'rxjs': 'npm:rxjs@^5.0.1',
    'typescript': 'npm:typescript@2.1.5/lib/typescript.js',

    '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-beta.2/bundles/ng-bootstrap.js'
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule);


import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdTabsetBasic } from './tabset-basic';

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid">
    
    <hr>
    <p>
      This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
      Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
    </p>
    <hr>

    <ngbd-tabset-basic></ngbd-tabset-basic>
  </div>
  `
})
export class App {
}   

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()], 
  declarations: [App, NgbdTabsetBasic]
  bootstrap: [App]
}) 
export class AppModule {}

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {Person} from './person.model';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'ngbd-tabset-basic',
  templateUrl: 'src/tabset-basic.html'
})
export class NgbdTabsetBasic implements OnInit { 
  
  model: Person;
  form: FormGroup;
  
  ngOnInit() {
    
    this.model = new Person();
  
    this.loadData().subscribe( // removing the asynchronous loading helps to get rid of the ExpressionChangedAfterItHasBeenCheckedError 
        res => this.model = res;
      );
  
    this.form = new FormGroup({
      firstname: new FormControl('', [Validators.required]),
      lastname: new FormControl('', [Validators.required])
    });
  }
 
  private loadData(): Observable<Person> {
    
    console.log('asdas');
    
    const observable = Observable.create(observer => {
      const person = new Person();
      person.firstname = 'Max';
      person.lastname = 'Mustermann';
      observer.next(person);
    });
    
    return observable;
  }
  
}

<div *ngIf="!!model">
  <form [formGroup]="form">

  <ngb-tabset>
    <ngb-tab title="First Name">
      <ng-template ngbTabContent>
        <div class="form-group mt-3" [class.has-danger]="form.controls.firstname.dirty && form.controls.firstname.errors">
          <div class="input-group">
            <span class="input-group-addon" id="firstname">First Name</span>
            <input type="text" class="form-control" aria-describedby="firstname" formControlName="firstname" name="firstname" [(ngModel)]="model.firstname" [class.form-control-danger]="form.controls.firstname.dirty && form.controls.firstname.errors">
          </div>
          <p *ngIf="form.controls.firstname.dirty && form.controls.firstname.errors">
            First Name is required!
          </p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab title="Last Name">
      <ng-template ngbTabContent>
        <div class="form-group mt-3" [class.has-danger]="form.controls.lastname.dirty && form.controls.lastname.errors">
          <div class="input-group">
            <span class="input-group-addon" id="lastname">Last Name</span>
            <input type="text" class="form-control" aria-describedby="lastname" formControlName="lastname" name="lastname" [(ngModel)]="model.lastname" [class.form-control-danger]="form.controls.lastname.dirty && form.controls.lastname.errors">
          </div>
          <p *ngIf="form.controls.lastname.dirty && form.controls.lastname.errors">
            Last Name is required!
          </p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
      <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
        <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo
          nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa
          terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>

<p>Model: {{model | json }}</p>

</form>
</div>

export class Person {

  firstname: string;
  lastname: string;

}