Demo: http://plnkr.co/edit/DeDNcY6GYinSrDqg6RRQ?p=preview
Like I say here (https://github.com/ng-bootstrap/ng-bootstrap/issues/1774): all manipulation with components in "init" makes ExpressionChangedAfterItHasBeenCheckedError.
How to work with elements without this error in console?
Angular: 4.3.3
ng-bootstrap: v1.0.0-beta.2
Bootstrap: 4.0.0-beta
What you are facing here is a bug in Angular itself, see https://github.com/angular/angular/issues/15634 (you can also check impact of this issue on modals in #1384).
Till the bug in Angular is fixed you can use a work-around with setTimeout as shown in the following plunker: http://plnkr.co/edit/Cf4Do8CucVbt5P95KvyW?p=preview
Closing as a duplicate of https://github.com/angular/angular/issues/15634 / #1384
Most helpful comment
What you are facing here is a bug in Angular itself, see https://github.com/angular/angular/issues/15634 (you can also check impact of this issue on modals in #1384).
Till the bug in Angular is fixed you can use a work-around with
setTimeoutas shown in the following plunker: http://plnkr.co/edit/Cf4Do8CucVbt5P95KvyW?p=previewClosing as a duplicate of https://github.com/angular/angular/issues/15634 / #1384