I have 2 components: A home component and a confirmation component (overlay).
When a button is clicked on the home component, it should trigger the confirmation component to open as a Angular CDK Overlay.
The issue is I cannot pass anything from the home component to the confirmation component by a custom injector and injection token as suggested by many others ie. Angular CDK: How to set Inputs in a ComponentPortal
My code on Stackblitz: https://stackblitz.com/edit/angular-overlay-inject
Did I miss something silly in the code? I am keep getting the StaticInjectorError and NullInjectorError.
Thanks a lot first guys.
Home component:
export const OVERLAY_DATA = new InjectionToken<any>("OVERLAY_DATA");
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(
    public overlay: Overlay,
    public viewContainerRef: ViewContainerRef,
    private injector: Injector
  ) {}
  public onClick() {
    const config = new OverlayConfig({
      hasBackdrop: true,
      scrollStrategy: this.overlay.scrollStrategies.block()
    });
    config.positionStrategy = this.overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically();
    const overlayRef = this.overlay.create(config);
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.dispose();
    });
    const componentPortal = new ComponentPortal(
      HelloComponent,
      this.viewContainerRef,
      this.createInjector('TestDataStringToPass')
    );
    overlayRef.attach(componentPortal);
  }
  private createInjector(dataToPass): PortalInjector {
    const injectorTokens = new WeakMap();
    injectorTokens.set(OVERLAY_DATA, dataToPass);
    return new PortalInjector(this.injector, injectorTokens);
  }
} 
Overlay component:
export class HelloComponent {
  public displayData: any;
  constructor(@Inject("OVERLAY_DATA") public data: any) {
    console.log("OVERLAY_DATA :", data);
    this.displayData = data;
  }
}
