Error when opening modal in ngOnChanges

Bug description:

Attempting to open a modal as the result of a change via ngOnChanges results in an:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'modal fade show'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/svQOUKKRvyWlioopFTjy?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

• Angular: angular@4.0.3
• ng-bootstrap: ng-bootstrap@1.0.0-alpha.26
• Bootstrap: bootstrap@4.0.0-alpha.6

[abnersouza]

I found a workaround in my case, where i have a login form then pressing key enter i open a NgbModal.

I did the following:

1. Added the #formElement to the my form html tag
2. Then in the ts I added @ViewChild(‘formElement’) formElement: ElementRef;
3. On the Submit event i do the following: this.formElement.nativeElement.ownerDocument.activeElement.blur();

Solved 😃

Tried all the other ways like setTimeout and no success

[pkozlowski-opensource]

This is Angular’s limitation, see: https://github.com/angular/angular/issues/15634

More details in https://github.com/ng-bootstrap/ng-bootstrap/issues/1384

Closing as a duplicate of https://github.com/angular/angular/issues/15634