title: Expression has changed error on Opening a Modal Popup inside a component
body: <p>I have a parent component and i am passing some HTML from it to a child common component using @ViewChild().</p>
  
  <p>When Child component loads up a popup. Console throws below error.</p>
  
  <p><strong>"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: this is description'. 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 ?"</strong></p>
  
  <p><strong>I am using { NgbModal } from '@ng-bootstrap/ng-bootstrap';</strong></p>
  
  <p>This is the code.</p>
  
  <p><strong>Update - 
  This parent component is called as app-parent-component in another parent html file.</strong></p>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>@ViewChild('templateToLoad') templateToLoad;
  
  
  constructor(private modalService: NgbModal, private ChangeDetector: ChangeDetectorRef) {
  }
  
  ngOnInit() {
      this.openPopup();
  }
  
  ngAfterViewInit() {
      this.ChangeDetector.detectChanges();
  }
  
  private openPopup() {
      const modalPrompt = this.modalService.open(CommonChildModalComponent, {windowClass: 'modal-prompt fade-in-down'});
      modalPrompt.componentInstance.title = 'Title';
      modalPrompt.componentInstance.contentTemplate = this.templateToLoad;
      modalPrompt.componentInstance.originContext = this;
      modalPrompt.componentInstance.description = 'ABC';
  </code></pre>
  
  <p><strong>Parent HTML</strong></p>
  
  <pre><code>&lt;ng-template #templateToLoad&gt;
    &lt;div class="someClass"&gt;This data will be shown on Popup without any error.
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>CommonChildPopup Component</strong></p>
  
  <pre><code>@Input() title?: string;
  @Input() description?: string;
  @Input() originContext: any;
  @Input() contentTemplate?: any;
  
  constructor(public activeModal: NgbActiveModal) {
  }
  
  ngOnInit() {
      console.log('I am here in CommonModalComponent ngOnInit');
  }
  </code></pre>
  
  <p>CommonChildPopup HTML</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h4 class="modal-title"&gt;{{title}}&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-body pb-3" [class.dimmer]="simulateLoading"&gt;
    &lt;p *ngIf="description"&gt;{{description}}&lt;/p&gt;
    &lt;ng-container *ngTemplateOutlet="contentTemplate"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>The above console error is for this line ngIf="description". If i remove this line, same error will come for next line. Please help.</p>