feat: providing a way to get the component attached to a CdkPortalOutlet

[noemi-salaun]

Bug, feature request, or proposal:

Feature request

When attaching a ComponentPortal to a CdkPortalOutlet using the declarative syntaxe <ng-template [cdkPortalOutlet]="myComponentPortal">, there is no way to get the instance of the component, created by the directive.

The only way to get the component instance is to attach the portal programmaticaly, but it would seem that the cycle is not as clean as using the directive directly. When doing it in the ngOnInit, the view isn't initialized, and inside the ngAfterViewInit, I get the "change after it was checked" error.

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

Dynamically render a component, based on some type attribute. The developer can register it's own component to be rendered if the type matches. All these components implement the same interface and I need my parent component to access some methods in it. To do so, I need to get the instance created during the portal attachment.

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

Angular: 5.1.3
Cdk: 5.0.3
OS: Windows 10
TS: 2.4.2
Browser: Chrome 63

[willshowell]

Do you have a reproduction? Just looking at the source, it seems the portal property would be what you want.

https://github.com/angular/material2/blob/b488b393c6ea2db75322cf76a588888bc0f2a4c4/src/cdk/portal/portal-directives.ts#L71-L74

[noemi-salaun]

The ComponentPortal returned by get portal() has access to the component type only.

https://github.com/angular/material2/blob/303e004527a74cb9da4bb894828c251741f63fbd/src/cdk/portal/portal.ts#L82-L84

The ComponentRef is created by the PortalOutlet during the attachment. But the ref isn't stored in the PortalOutlet, it is returned straight from the attach() function.

https://github.com/angular/material2/blob/303e004527a74cb9da4bb894828c251741f63fbd/src/cdk/portal/portal.ts#L184

The problem is, when using the CdkPortalOutlet directive, it's the directive that take care of the attachment, so we don't have access to the ComponentRef.

I'll add a plunker tomorrow if still necessary.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}