feat(cdk/portal): support projectableNodes in component portal (#25185)

Allows for the `projectableNodes` parameter to be used with a component portal.

Fixes #9045.

Author: crisbeto

src/cdk/portal/dom-portal-outlet.ts

@@ -74,6 +74,7 @@ export class DomPortalOutlet extends BasePortalOutlet {
         componentFactory,
         portal.viewContainerRef.length,
         portal.injector || portal.viewContainerRef.injector,
+        portal.projectableNodes || undefined,
       );
 
       this.setDisposeFn(() => componentRef.destroy());

src/cdk/portal/portal-directives.ts

@@ -133,8 +133,7 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
 
   ngOnDestroy() {
     super.dispose();
-    this._attachedPortal = null;
-    this._attachedRef = null;
+    this._attachedRef = this._attachedPortal = null;
   }
 
   /**
@@ -157,6 +156,7 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
       componentFactory,
       viewContainerRef.length,
       portal.injector || viewContainerRef.injector,
+      portal.projectableNodes || undefined,
     );
 
     // If we're using a view container that's different from the injected one (e.g. when the portal

src/cdk/portal/portal.spec.ts

@@ -450,6 +450,19 @@ describe('Portals', () => {
 
       expect(hostContainer.textContent).toContain('Pizza');
     });
+
+    it('should be able to pass projectable nodes to portal', () => {
+      // Set the selectedHost to be a ComponentPortal.
+      const testAppComponent = fixture.componentInstance;
+      const componentPortal = new ComponentPortal(PizzaMsg, undefined, undefined, undefined, [
+        [document.createTextNode('Projectable node')],
+      ]);
+
+      testAppComponent.selectedPortal = componentPortal;
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.textContent).toContain('Projectable node');
+    });
   });
 
   describe('DomPortalOutlet', () => {
@@ -728,7 +741,7 @@ class ChocolateInjector {
 /** Simple component for testing ComponentPortal. */
 @Component({
   selector: 'pizza-msg',
-  template: '<p>Pizza</p><p>{{snack}}</p>',
+  template: '<p>Pizza</p><p>{{snack}}</p><ng-content></ng-content>',
 })
 class PizzaMsg {
   constructor(@Optional() public snack: Chocolate) {}

src/cdk/portal/portal.ts

@@ -86,13 +86,13 @@ export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
   component: ComponentType<T>;
 
   /**
-   * [Optional] Where the attached component should live in Angular's *logical* component tree.
+   * Where the attached component should live in Angular's *logical* component tree.
    * This is different from where the component *renders*, which is determined by the PortalOutlet.
    * The origin is necessary when the host is outside of the Angular application context.
    */
   viewContainerRef?: ViewContainerRef | null;
 
-  /** [Optional] Injector used for the instantiation of the component. */
+  /** Injector used for the instantiation of the component. */
   injector?: Injector | null;
 
   /**
@@ -101,17 +101,24 @@ export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
    */
   componentFactoryResolver?: ComponentFactoryResolver | null;
 
+  /**
+   * List of DOM nodes that should be projected through `<ng-content>` of the attached component.
+   */
+  projectableNodes?: Node[][] | null;
+
   constructor(
     component: ComponentType<T>,
     viewContainerRef?: ViewContainerRef | null,
     injector?: Injector | null,
     componentFactoryResolver?: ComponentFactoryResolver | null,
+    projectableNodes?: Node[][] | null,
   ) {
     super();
     this.component = component;
     this.viewContainerRef = viewContainerRef;
     this.injector = injector;
     this.componentFactoryResolver = componentFactoryResolver;
+    this.projectableNodes = projectableNodes;
   }
 }
 

tools/public_api_guard/cdk/portal.md

@@ -78,10 +78,11 @@ export type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any
 
 // @public
 export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
-    constructor(component: ComponentType<T>, viewContainerRef?: ViewContainerRef | null, injector?: Injector | null, componentFactoryResolver?: ComponentFactoryResolver | null);
+    constructor(component: ComponentType<T>, viewContainerRef?: ViewContainerRef | null, injector?: Injector | null, componentFactoryResolver?: ComponentFactoryResolver | null, projectableNodes?: Node[][] | null);
     component: ComponentType<T>;
     componentFactoryResolver?: ComponentFactoryResolver | null;
     injector?: Injector | null;
+    projectableNodes?: Node[][] | null;
     viewContainerRef?: ViewContainerRef | null;
 }