Unable to capture data in component using PortalInjector in Angular material

1.1k views Asked by At

As per the documentation and git-hub issue comments, I am trying to implement a custom-injector to pass the data to a component that I am loading dynamically using @angular/cdk and cdkPortalOutlet. I am able to see the PortalInjector getting created successfully using InjectorToken however while trying to fetch/use the data in the component which is loaded dynamically I am always getting a null.

data/injector.ts

import {InjectionToken,Injector} from '@angular/core';
import {PortalInjector} from '@angular/cdk/portal';
export const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA');
export class DataInjector{
public createInjector(dataToPass,_injector): PortalInjector {
const injectorTokens = new WeakMap();
injectorTokens.set(CONTAINER_DATA, dataToPass);
return new PortalInjector(_injector, injectorTokens);
}
} 

component/base.component.ts

   var  di:DataInjector= new DataInjector();
   var   pi:PortalInjector=di.createInjector("AutoMode",this._injector);
   console.log("portalinjector passed is:");
   console.log(pi);
   cportal:Portal<any>=new ComponentPortal(ToolbarComponent,null,pi));

ToolbarComponent

import { Component, Inject,OnInit } from '@angular/core';
import {CONTAINER_DATA} from '../../data/injector';
@Component({
selector: 'app-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {
@Inject(CONTAINER_DATA) public componentData: any
constructor() {
console.log("ToolbarComponent^dataobtained constructo is:");
console.log(this.componentData);// prints null
  }

ngOnInit() {
console.log("ToolbarComponent^dataobtained is:");
console.log(this.componentData); //prints null
}

}

The lines marked as //prints null, always prints null. However

 console.log("portalinjector passed is:");
 console.log(pi);

Prints :

   PortalInjector {_parentInjector: Injector_, _customTokens: 
   WeakMap}_customTokens: WeakMap {InjectionToken => 
   "AutoMode"}_parentInjector: Injector_ {view: {…}, elDef: {…}}__proto__: 
   Object

Can someone let me know if I am missing anything?

0

There are 0 answers