Transferring data between a ComponentPortal within an Angular CDK

Question

Transferring data between a ComponentPortal within an Angular CDK

After attempting to implement the method described in a Stack Overflow thread on Angular CDK: How to set Inputs in a ComponentPortal, I've encountered issues with the deprecated PortalInjector without clear guidance on what to use instead. The deprecation warning simply advises to "Use Injector.create instead," leaving me confused about how and where to apply it and what it's meant to replace.

Additionally, I delved into Material's Dialog component in search of insights on how to handle this, but to no avail.

So, I am presenting my question again in the context of Angular 13:

How can I effectively transfer data in and out of a component created through ComponentPortal()? If the solution involves using an Injector, could you kindly direct me to an example or documentation illustrating the process? Perhaps even a basic 'hello world' example showcasing Injector usage?

javascript angular typescript angular-cdk

Answer 1

Answer №1

It seems I may be a bit behind, but there is a nifty way to utilize @Input() and @Output() of a component within a Portal. It may not be obvious at first glance, but by calling

this.overlayRef.attach(MyComponent)

, you can obtain a ComponentRef<MyComponent>. This allows direct access to the component instance, giving you the flexibility to manipulate it as needed.

Here's an example:

const componentPortal = new ComponentPortal(MyComponent);
const componentRef = this.overlayRef.attach(componentPortal);

// Set input data:
componentRef.instance.someInput = 'test';

// Subscribe to output:
componentRef.instance.someOutput.subscribe();

Your MyComponent would have a structure like this:

@Component({...})
export class MyComponent {
    @Input()
    someInput: string;

    @Output()
    someOutput = new EventEmitter<string>();
}

Keep on coding!

Answer 2

It seems I may be a bit behind, but there is a nifty way to utilize @Input() and @Output() of a component within a Portal. It may not be obvious at first glance, but by calling

this.overlayRef.attach(MyComponent)

, you can obtain a ComponentRef<MyComponent>. This allows direct access to the component instance, giving you the flexibility to manipulate it as needed.

Here's an example:

const componentPortal = new ComponentPortal(MyComponent);
const componentRef = this.overlayRef.attach(componentPortal);

// Set input data:
componentRef.instance.someInput = 'test';

// Subscribe to output:
componentRef.instance.someOutput.subscribe();

Your MyComponent would have a structure like this:

@Component({...})
export class MyComponent {
    @Input()
    someInput: string;

    @Output()
    someOutput = new EventEmitter<string>();
}

Keep on coding!

Answer 3

Answer №2

I may be a little fashionably late to the gathering, but here's an alternative approach using the Injector.create method.

To begin, I defined an injection token:

export const CUSTOM_INJECTION_TOKEN = new InjectionToken<string>('CUSTOM_INJECTION_TOKEN');

In my scenario, I have a service responsible for creating and supplying the ComponentPortal. The implementation looks something like this:

export class BarService {
  // ...

  launch(component: ComponentType<any>, info?: unknown) {
    // ...

    const portal = new ComponentPortal(
      component,
      null,
      Injector.create({
        providers: [{ provide: CUSTOM_INJECTION_TOKEN, useValue: info }],
      }),
    );

    // ...
  }
}

Subsequently, I utilized @Inject() to access the information.

export class FoobazComponent {
  constructor(@Inject(CUSTOM_INJECTION_TOKEN) info: MyDataType) { }
}

Finally, when invoking the service to generate the portal, the code resembled the following:

const information = {baz: 'qux'};
barService.launch(FoobazComponent, information);

Answer 4

I may be a little fashionably late to the gathering, but here's an alternative approach using the Injector.create method.

To begin, I defined an injection token:

export const CUSTOM_INJECTION_TOKEN = new InjectionToken<string>('CUSTOM_INJECTION_TOKEN');

In my scenario, I have a service responsible for creating and supplying the ComponentPortal. The implementation looks something like this:

export class BarService {
  // ...

  launch(component: ComponentType<any>, info?: unknown) {
    // ...

    const portal = new ComponentPortal(
      component,
      null,
      Injector.create({
        providers: [{ provide: CUSTOM_INJECTION_TOKEN, useValue: info }],
      }),
    );

    // ...
  }
}

Subsequently, I utilized @Inject() to access the information.

export class FoobazComponent {
  constructor(@Inject(CUSTOM_INJECTION_TOKEN) info: MyDataType) { }
}

Finally, when invoking the service to generate the portal, the code resembled the following:

const information = {baz: 'qux'};
barService.launch(FoobazComponent, information);

Answer 5

Answer №3

In my opinion, there isn't a direct method to pass data in and out of the componentportal.

One approach is to send the data you want to use as an @Input through the attached event of the portal.

Take a look at this demo code demonstrating how to pass values to the Guest component.

<ng-template (attached)="onComponentRendering($event)" [cdkPortalOutlet]="guestPortal"></ng-template>

Then, you can access it like this:

 public onComponentRendering(ref): void {
    ref = ref as ComponentRef<any>;
    ref.instance['guestData'] = [ ...something];
 }

For output data, you can establish a service (using Subject) to facilitate communication between components.

Answer 6

In my opinion, there isn't a direct method to pass data in and out of the componentportal.

One approach is to send the data you want to use as an @Input through the attached event of the portal.

Take a look at this demo code demonstrating how to pass values to the Guest component.

<ng-template (attached)="onComponentRendering($event)" [cdkPortalOutlet]="guestPortal"></ng-template>

Then, you can access it like this:

 public onComponentRendering(ref): void {
    ref = ref as ComponentRef<any>;
    ref.instance['guestData'] = [ ...something];
 }

For output data, you can establish a service (using Subject) to facilitate communication between components.

Answer 7

Answer №4

My approach was slightly different, especially suitable for small amounts of data. I couldn't use the method suggested by @Shashank Vivek because I initialized the ComponentPortal within a directive.

One alternative is to utilize ReplaySubject. Here is a basic example. First, define it in an Injectable:

@Injectable
myService {
  overlayNotification: ReplaySubject<boolean>;
}

In your Component:

myComponent implements OnInit
constructor(private myService: myService) {}
ngOnInit() {
  this.myService.overlayNotification = new ReplaySubject();
}
method4Overlay() {
  this.myService.overlayNotification.next(.... your data ...);
  this.overlayRef = this.overlay.create(overlayConfig);
  this.overlayRef.attach(new ComponentPortal(MySampleComponent));
}

Lastly, in your MySampleComponent:

MySampleComponent implements OnInit
constructor(private myService: myService) {}
ngOnInit() {
    this.myService.overlayNotification.subscribe((myData:...) => .... received data);
 }

Using ReplaySubject allows for easy updates. Keep in mind that events are not replayed, and you need to create a new instance. This method bypasses the need for @Input().

Further details will require your own coding, but this outline offers an alternative approach.

Answer 8

My approach was slightly different, especially suitable for small amounts of data. I couldn't use the method suggested by @Shashank Vivek because I initialized the ComponentPortal within a directive.

One alternative is to utilize ReplaySubject. Here is a basic example. First, define it in an Injectable:

@Injectable
myService {
  overlayNotification: ReplaySubject<boolean>;
}

In your Component:

myComponent implements OnInit
constructor(private myService: myService) {}
ngOnInit() {
  this.myService.overlayNotification = new ReplaySubject();
}
method4Overlay() {
  this.myService.overlayNotification.next(.... your data ...);
  this.overlayRef = this.overlay.create(overlayConfig);
  this.overlayRef.attach(new ComponentPortal(MySampleComponent));
}

Lastly, in your MySampleComponent:

MySampleComponent implements OnInit
constructor(private myService: myService) {}
ngOnInit() {
    this.myService.overlayNotification.subscribe((myData:...) => .... received data);
 }

Using ReplaySubject allows for easy updates. Keep in mind that events are not replayed, and you need to create a new instance. This method bypasses the need for @Input().

Further details will require your own coding, but this outline offers an alternative approach.

Transferring data between a ComponentPortal within an Angular CDK

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I encountered an issue while working with Material-UI and Mobx. The error message reads: "Material-UI: capitalize(string) function requires a string argument

How to Force a jQuery Redraw Following Data Retrieval Using Ajax

A guide on displaying an array object in a table column using Vue.js and Element UI

Is there a way to extract only the value from the most recent request?

What is causing my axios request to not retrieve the correct data?

Adding setTimeout within the Axios Scope can enhance the functionality and performance of your

What steps can be taken to resolve the issue of receiving the error message "Invalid 'code' in request" from Discord OAuth2?

Illuminating individual table cells as a user drags their mouse across a row

The 'payload' property is not found within the 'Actions' type

Performing mathematical calculations with numerical values

Tips for creating Junit tests for a CDK environment

Using Stack and Drawer Navigations Together in React Native Navigation(v6)

Incorporating graphics into a React component

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

Ways to close jQuery Tools Overlay with a click, regardless of its location

Using JavaScript to organize and reformat JSON data into grouped structures

Scrolling triggers the click event

Utilize JavaScript to extract an image from an external URL by specifying its attributes (id, class)

The textbox is only enabled when a specific selection is made in the dropdown menu

What's the Deal with Blank Square Brackets in JavaScript?