question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to pass data to a ComponentPortal

See original GitHub issue

Bug, feature request, or proposal:

I’m trying to pass data to a portal (I’m using ComponentPortal), but so far, there’s no possible way to do so.

What is the expected behavior?

Able to pass data to a ComponentPortal

What is the current behavior?

Can’t pass data to a ComponentPortal

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/uDmqyY
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

I want to show a code snippet with a param passed in as part of the code snippet.

Something like this:

<code-viewer language="html">
&lt;mat-icon svgIcon="{{selectedIcon}}"&gt;&lt;/mat-icon&gt;
</code-viewer>
export class CodeSnippetComponent {
    selectedIcon: string; // <- How to declare this?
}

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular v5.0.1
Angular Material v5.0.0-rc.0
Typescript 2.4.2
macOS High Sierra 10.13.1
Google Chrome Version 63.0.3239.30 (Official Build) beta (64-bit)

Is there anything else we should know?

NIL

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
mmeziancommented, Jul 3, 2019

Closing as this is already supported.

You can pass data into a ComponentPortal using the injector. An example of this can be seen in the dialog here using the injector that is created here

None of the links are working. Struggling with this issue. Please show us how to pass data in a manageable way

2reactions
josephperrottcommented, Nov 9, 2017

Closing as this is already supported.

You can pass data into a ComponentPortal using the injector. An example of this can be seen in the dialog here using the injector that is created here

Read more comments on GitHub >

github_iconTop Results From Across the Web

Passing data to and from a ComponentPortal in Angular CDK
What you can do is to pass the data which you want to use as @Input using the attached event of portal. Check...
Read more >
How to provide data to ComponentPortal using Dependency ...
3) Switch to the “provide-data-to-component-portal” branch. 4) Create a new branch “my-solution” from a specific commit which contains the ...
Read more >
Inject dynamic content in Angular components with portals
To pass context data in templatePortal , we can use the context property. // TypeScript this.portal.context = {}; ...
Read more >
How do CDK Portals work? - Medium
The viewRef variable now contains an in-memory rendered view, allowing us to pass it along to a “Portal host” which is responsible for...
Read more >
How to pass an Input into a ComponentPortal ? : r/Angular2
At the moment, I am stuck trying to find an efficient way to load Input variables into components while they are loaded. Typescript...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found