title: ngb modal component issue when load in oninit angular 6
body: <p>I am trying to load my modal window in the Oninit function. but there is a issue with this. please check below image</p>
  
  <p><a href="https://i.stack.imgur.com/Gg7rr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gg7rr.png" alt="enter image description here"></a></p>
  
  <pre><code>*modal open function*
    open() {
      const modalRef = this.modalService.open(NgbdModalContent);
      modalRef.componentInstance.name = 'World';
    }
  
      ngOnInit() {
         if (JSON.parse(localStorage.getItem('token')).user.isPasswordReset === 1) {
          this.open();
      }
         // console.log(this.userorg );
  
      }
  </code></pre>
  
  <p>i am trying to call .open() function in page load. that modal content in the another component. i think error came from 'ngIf' attribute. please check my below modal component.</p>
  
  <p>my modal component</p>
  
  <pre><code>@Component({
    selector: 'ngbd-modal-content',
    template: `
      &lt;div class="modal-header"&gt;
        &lt;h4 class="modal-title"&gt;Reset Password&lt;/h4&gt;
        &lt;button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"&gt;
          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;p *ngIf="resetPasswordError" class="text-center errorRPW"&gt;{{resetPasswordErrorMessage}}&lt;/p&gt;
       &lt;div *ngIf="resetPasswordSuccess" class="alert alert-success" role="alert"&gt;
  Your Password has been reset.
  &lt;/div&gt;
       &lt;form name="form" #resetpasswordform="ngForm" novalidate (ngSubmit)="resetpasswordform.form.valid &amp;&amp; resetPassword();"&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for="staticEmail" class="col-sm-4 col-form-label"&gt;Username&lt;/label&gt;
      &lt;div class="col-sm-8"&gt;
       &lt;input type="text" required class="form-control" id="userName" [(ngModel)]="passwordModel.userName" name="userName" #userName="ngModel" placeholder="UserName"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for="inputPassword" class="col-sm-4 col-form-label"&gt;Current Password&lt;/label&gt;
      &lt;div class="col-sm-8"&gt;
        &lt;input type="password" required [(ngModel)]="passwordModel.oldPassword" name="oldPassword" #oldPassword="ngModel" class="form-control" id="inputPassword" placeholder="Current Password"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
      &lt;div class="form-group row"&gt;
      &lt;label for="inputPassword" class="col-sm-4 col-form-label"&gt;New Password&lt;/label&gt;
      &lt;div class="col-sm-8"&gt;
        &lt;input type="password" required class="form-control" id="newinputPassword" [(ngModel)]="passwordModel.newPassword" name="newPassword" #newPassword="ngModel" placeholder="New Password"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;div class="form-group row"&gt;
      &lt;label for="inputPassword" class="col-sm-4 col-form-label"&gt;Confirm Password&lt;/label&gt;
      &lt;div class="col-sm-8"&gt;
        &lt;input type="password" required class="form-control" id="confirminputPassword" [(ngModel)]="resetpasswordform.confirmPassword" name="confirmPassword" #confirmPassword="ngModel" placeholder="Confirm Password" compare="newPassword"&gt;
      &lt;/div&gt;
          &lt;div class="text-danger text-danger-popup" *ngIf="confirmPassword.invalid &amp;&amp; (confirmPassword.dirty || confirmPassword.touched)"&gt;
  &lt;div *ngIf="confirmPassword.errors['compare']"&gt; Password confirm do not match&lt;/div&gt;
  &lt;/div&gt;
    &lt;/div&gt;
       &lt;div class="modal-footer"&gt;
        &lt;button type="submit" class="btn btn-primary mb-2 expad" [disabled]="resetpasswordform.invalid"&gt; Reset Password&lt;/button&gt;
  
      &lt;/div&gt;
  
  
  
  &lt;/form&gt;
      &lt;/div&gt;
  
  })
  </code></pre>
  
  <p>error said, </p>
  
  <blockquote>
    <p>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression
    has changed after it was checked. Previous value: 'ngIf: undefined'.
    Current value: 'ngIf: undefined'.</p>
  </blockquote>
  
  <p>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 ?</p>
  
  <p>can u help me to solve this?</p>
  
  <p>Thanks </p>