fix(overlay): Render the templates before placing them in the overlay.

This fixes positioning issues when rendering templates which contain embedded templates.
The templates need to be rendered in order to properly determine width which can then determine placement.

Author: trshafer

src/demo-app/overlay/overlay-demo.html

@@ -10,6 +10,10 @@
   Pasta 3
 </button>
 
+<button cdk-overlay-origin #tortelliniOrigin="cdkOverlayOrigin" (click)="openTortelliniPanel()">
+  Pasta 4
+</button>
+
 
 <button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">
   Open menu
@@ -27,4 +31,8 @@
   <p class="demo-fusilli"> Fusilli </p>
 </template>
 
+<template cdk-portal #tortelliniTemplate="cdkPortal">
+  <ul class="demo-tortellini"><li *ngFor="let filling of tortelliniFillings">{{filling}}</li></ul>
+</template>
+
 <button (click)="openPanelWithBackdrop()">Backdrop panel</button>

src/demo-app/overlay/overlay-demo.scss

@@ -18,3 +18,12 @@
   background-color: rebeccapurple;
   opacity: 0.5;
 }
+
+.demo-tortellini {
+  margin: 0;
+  padding: 10px;
+  border: 1px solid black;
+  color: white;
+  background-color: orangered;
+  opacity: 0.5;
+}

src/demo-app/overlay/overlay-demo.ts

@@ -26,9 +26,12 @@ import {
 export class OverlayDemo {
   nextPosition: number = 0;
   isMenuOpen: boolean = false;
+  tortelliniFillings = ['cheese and spinach', 'mushroom and broccoli'];
 
   @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;
   @ViewChild(OverlayOrigin) _overlayOrigin: OverlayOrigin;
+  @ViewChild('tortelliniOrigin') tortelliniOrigin: OverlayOrigin;
+  @ViewChild('tortelliniTemplate') tortelliniTemplate: TemplatePortalDirective;
 
   constructor(public overlay: Overlay, public viewContainerRef: ViewContainerRef) { }
 
@@ -75,6 +78,21 @@ export class OverlayDemo {
     overlayRef.attach(new ComponentPortal(SpagettiPanel, this.viewContainerRef));
   }
 
+  openTortelliniPanel() {
+    let strategy = this.overlay.position()
+        .connectedTo(
+            this.tortelliniOrigin.elementRef,
+            {originX: 'start', originY: 'bottom'},
+            {overlayX: 'end', overlayY: 'top'} );
+
+    let config = new OverlayState();
+    config.positionStrategy = strategy;
+
+    let overlayRef = this.overlay.create(config);
+
+    overlayRef.attach(this.tortelliniTemplate);
+  }
+
   openPanelWithBackdrop() {
     let config = new OverlayState();
 

src/lib/core/portal/dom-portal-host.ts

@@ -64,12 +64,12 @@ export class DomPortalHost extends BasePortalHost {
   attachTemplatePortal(portal: TemplatePortal): Map<string, any> {
     let viewContainer = portal.viewContainerRef;
     let viewRef = viewContainer.createEmbeddedView(portal.templateRef);
+    viewRef.detectChanges();
 
     // The method `createEmbeddedView` will add the view as a child of the viewContainer.
     // But for the DomPortalHost the view can be added everywhere in the DOM (e.g Overlay Container)
     // To move the view to the specified host element. We just re-append the existing root nodes.
     viewRef.rootNodes.forEach(rootNode => this._hostDomElement.appendChild(rootNode));
-
     this.setDisposeFn((() => {
       let index = viewContainer.indexOf(viewRef);
       if (index !== -1) {

src/lib/core/portal/portal-directives.ts

@@ -104,7 +104,9 @@ export class PortalHostDirective extends BasePortalHost implements OnDestroy {
   attachTemplatePortal(portal: TemplatePortal): Map<string, any> {
     portal.setAttachedHost(this);
 
-    this._viewContainerRef.createEmbeddedView(portal.templateRef);
+    const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef);
+    viewRef.detectChanges();
+
     this.setDisposeFn(() => this._viewContainerRef.clear());
 
     // TODO(jelbourn): return locals from view