fix(portal): content not rendered inside outlet when view container is provided (#17731)

Fixes the contents of the portal not being rendered inside of the `CdkPortalOutlet`  if an alternate `ViewContainerRef` is provided. We have some logic that moves the content into the outlet for `DomPortalOutlet` already, but we probably missed adding it to the directive since it isn't being used in as many places.

Fixes #17650.

Author: crisbeto

src/cdk/portal/portal-directives.ts

@@ -157,6 +157,13 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
         componentFactory, viewContainerRef.length,
         portal.injector || viewContainerRef.injector);
 
+    // If we're using a view container that's different from the injected one (e.g. when the portal
+    // specifies its own) we need to move the component into the outlet, otherwise it'll be rendered
+    // inside of the alternate view container.
+    if (viewContainerRef !== this._viewContainerRef) {
+      this._getRootNode().appendChild((ref.hostView as EmbeddedViewRef<any>).rootNodes[0]);
+    }
+
     super.setDisposeFn(() => ref.destroy());
     this._attachedPortal = portal;
     this._attachedRef = ref;
@@ -197,21 +204,28 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
 
     // Anchor used to save the element's previous position so
     // that we can restore it when the portal is detached.
-    let anchorNode = this._document.createComment('dom-portal');
-    let element = portal.element;
-    const nativeElement: Node = this._viewContainerRef.element.nativeElement;
-    const rootNode = nativeElement.nodeType === nativeElement.ELEMENT_NODE ?
-        nativeElement : nativeElement.parentNode!;
+    const anchorNode = this._document.createComment('dom-portal');
+    const element = portal.element;
 
     portal.setAttachedHost(this);
     element.parentNode!.insertBefore(anchorNode, element);
-    rootNode.appendChild(element);
+    this._getRootNode().appendChild(element);
 
     super.setDisposeFn(() => {
       anchorNode.parentNode!.replaceChild(element, anchorNode);
     });
   }
 
+  /** Gets the root node of the portal outlet. */
+  private _getRootNode(): HTMLElement {
+    const nativeElement: Node = this._viewContainerRef.element.nativeElement;
+
+    // The directive could be set on a template which will result in a comment
+    // node being the root. Use the comment's parent node if that is the case.
+    return (nativeElement.nodeType === nativeElement.ELEMENT_NODE ?
+           nativeElement : nativeElement.parentNode!) as HTMLElement;
+  }
+
   static ngAcceptInputType_portal: Portal<any> | null | undefined | '';
 }
 

src/cdk/portal/portal.spec.ts

@@ -361,6 +361,16 @@ describe('Portals', () => {
       expect(spy).toHaveBeenCalled();
     });
 
+    it('should render inside outlet when component portal specifies view container ref', () => {
+      const hostContainer = fixture.nativeElement.querySelector('.portal-container');
+      const portal = new ComponentPortal(PizzaMsg, fixture.componentInstance.alternateContainer);
+
+      fixture.componentInstance.selectedPortal = portal;
+      fixture.detectChanges();
+
+      expect(hostContainer.textContent).toContain('Pizza');
+    });
+
   });
 
   describe('DomPortalOutlet', () => {
@@ -593,6 +603,8 @@ class ArbitraryViewContainerRefComponent {
     <ng-template [cdkPortalOutlet]="selectedPortal" (attached)="attachedSpy($event)"></ng-template>
   </div>
 
+  <ng-container #alternateContainer></ng-container>
+
   <ng-template cdk-portal>Cake</ng-template>
 
   <div *cdk-portal>Pie</div>
@@ -616,6 +628,8 @@ class PortalTestApp {
   @ViewChild(CdkPortalOutlet, {static: true}) portalOutlet: CdkPortalOutlet;
   @ViewChild('templateRef', {read: TemplateRef, static: true}) templateRef: TemplateRef<any>;
   @ViewChild('domPortalContent', {static: true}) domPortalContent: ElementRef<HTMLElement>;
+  @ViewChild('alternateContainer', {read: ViewContainerRef, static: true})
+  alternateContainer: ViewContainerRef;
 
   selectedPortal: Portal<any>|undefined;
   fruit: string = 'Banana';