Make angular-material components, directives and CDK working well inside iframes

[VitaliyOnRule]

We have an iframe and angular-components there (they are appended to iframe elements after initializing in app of main window). Custom components are working well, but angular components and directives are with some bugs. For example:

MatTooltip for iframe elements appears with offset which equals to offset between iframe and main window

[crisbeto]

Can you post an example of what you're doing? The "they are appended to iframe elements after initializing in app of main window" sounds like we might've saved a reference to the original window when the elements are created and we keep using them once it's inside the new window.

[VitaliyOnRule]

@crisbeto sure - here is demo and code source https://stackblitz.com/edit/angular-f4qcc1?file=src/app/app.module.ts something like it.

Yes I think you are right regarding the reason of it. But in general angular works perfectly with iframes in such way. Would be cool if angular-material will be adjusted for that

Here is an example with tooltip but the same happened with all material components which are using overlay portals

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.