Angular 7 CDK Portal : Error Must provide a portal to attach

Question

I have this ActionButtonComponent, which uses the Angular CDK Portal :

import { CdkPortal, DomPortalHost } from '@angular/cdk/portal';
import { AfterViewInit, ApplicationRef, Component, ComponentFactoryResolver, Injector, OnDestroy, ViewChild } from '@angular/core';

@Component({
  selector: 'app-action-button',
  template: `
    <ng-container *cdkPortal>
      <ng-content></ng-content>
    </ng-container>
  `
})
export class ActionButtonComponent implements AfterViewInit, OnDestroy {

  @ViewChild(CdkPortal)
  private portal: CdkPortal;

  private host: DomPortalHost;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private injector: Injector
  ) { }

  ngAfterViewInit(): void {
    this.host = new DomPortalHost(
      document.querySelector('#action'),
      this.componentFactoryResolver,
      this.applicationRef,
      this.injector
    );

    console.log(this.portal); // <-- logs "undefined"
    console.log(document.querySelector('#action')); // <-- logs "<div id="action"></div>"

    this.host.attach(this.portal);
  }
  ngOnDestroy(): void {
    this.host.detach();
  }

}

I use it in another component like this :

<div id="action"></div>
<!-- ... other code here ... -->
<router-outlet></router-outlet>

Finally, this is from a component that goes into the router-outlet :

<app-action-button>
    <button>click</button>
</app-action-button>

In "ngAfterViewInit" I log the portal variable and "document.querySelector('#action')". portal variable is "undefined" but the component finds the div with id="#action".

When I run it, I get this error :

Error: Must provide a portal to attach
    at throwNullPortalError (portal.es5.js:22)
    at DomPortalOutlet.push../node_modules/@angular/cdk/esm5/portal.es5.js.BasePortalOutlet.attach (portal.es5.js:286)
    at action-button.component.ts:36
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

Why is the variable "portal"

@ViewChild(CdkPortal)
private portal: CdkPortal;

still undefined in "ngAfterViewInit()" ?

Do I use cdkPortal in the template

<ng-container *cdkPortal>
  <ng-content></ng-content>
</ng-container>

wrong?

Note: in app.module.ts, adding ActionButtonComponent to entryComponents array doesn't have any effect :

@NgModule({
    entryComponents: [ActionButtonComponent],
    declarations: [...]

Stackblitz can be found here

Angular CLI: 7.1.4
Node: 11.5.0
OS: linux x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/cdk                      7.2.0
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Calyptrogen

Answer 1

I checked your Stackblitz.

You forgot to import PortalModule in your app.module.ts.

import {PortalModule} from '@angular/cdk/portal';
...

@NgModule({
  ...

  declarations: [ ... ],
  imports: [
     ...
     PortalModule
  ],

  ...

})
export class AppModule { }

I implemented the same example. It Should work now.

Avilla