title: Angular ExpressionChangedAfterItHasBeenCheckedError in dynamically created component
body: <p>I am facing an Issue with Angular and the <code>CdkPortal</code>/<code>CdkPortalHost</code> from <code>@angular/cdk</code>.<br>
  I created a service, which allowes me to register a <code>CdkPortalHost</code> with a given name and set it's <code>Component</code> in any moment.  </p>
  
  <p>The service looks like this:</p>
  
  <pre><code>private portalHosts : { [location : string] : CdkPortalOutlet } = {};
  private portals : { [location : string] : any} = {};
  
  /** Sets the PortalHost for the given location. */
  public register(location : string, portalHost : CdkPortalOutlet) {
      this.portalHosts[location] = portalHost;
  }
  
  /** Sets the Component for the given location. */
  public setComponent&lt;T&gt;(location : string, type : ComponentType&lt;T&gt;) : ComponentRef&lt;T&gt; {
      let ref : ComponentRef&lt;T&gt; = null;
      let portalHost = this.portalHosts[location];
      if (portalHost) {
          if (portalHost.hasAttached()) {
              portalHost.portal.detach();
              this.portals[location] = null;
          }
          ref = portalHost.attachComponentPortal(new ComponentPortal(type));
          this.portals[location] = ref.instance;
      }
      return ref;
  }
  </code></pre>
  
  <p>Then I registered a PortalHost like this:</p>
  
  <pre><code>@ViewChild(PortalHostDirective)
  private portalHost : PortalHostDirective;
  
  public ngAfterContentInit() {
      this.dynamicComponentService.register("Location", this.portalHost);
  }
  </code></pre>
  
  <p>In an other Component, which is a child of the Component that registers the PortalHost, I set the dynamic Component like this:</p>
  
  <pre><code>public ngAfterContentInit() {
      this.dynamicComponentService.setComponent("Location", MyDynamicComponent);
  }
  </code></pre>
  
  <p>For testing-purposes I use a simple template for the MyDynamicComponent:</p>
  
  <pre><code>&lt;div *ngIf="true"&gt;Test&lt;/div&gt;
  </code></pre>
  
  <p>Now, when I run the App, I get the following error:  </p>
  
  <pre><code>Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
  Previous value: 'undefined'. Current value: 'true'.
  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 ?
  </code></pre>
  
  <p>I have seen a few similar questions, but the "window.setTimeout"-Workaround did not work for me.<br>
  Also I tryed differed lifecycle-hooks for the PortalHost-Registration and the Component-Creation but the result was always the same...  </p>
  
  <p>I am using Angular 5.0.1 and Material/CDK 5.0.0-rc0.</p>
  
  <p>Am I missing something or is this a bug?<br>
  Is it related to <a href="https://github.com/angular/material2/issues/5268" rel="nofollow noreferrer">Angular/Material#5268</a></p>