In my project I'm working on styling some overlays. Because of the nested component structure I'm running into some problems here. The intended solution is to move the overlay somewhere closer to the app root while preserving data bindings, making the css styling less restricted.
I've managed to set up a prototype using Renderer2.appendChild(...). When the overlay is shown, the ngOnInit of the overlay appends the overlay to another DOM element.
With my current code I can either get the input or output binding to work (but not both), based on moving an empty comment <!----> found directly in front of the overlay.
From my understanding (Empty comments in Angular application) Angular needs this comment, but Renderer2.appendChild does not account for it (maybe it's not meant to be used for components, only for 'raw' html?).
Demo:
Here's the prototype presenting both issues I am stuck on: https://stackblitz.com/edit/angular-pg24om
Visibility of the overlays (shown below the labels) can be toggled with a button. The submit buttons inside the overlay logs the input to the console using an @Output event emitter. Pressing change text changes an @Input property.
Without moving the overlay, input and output binding works like expected.
Incorrect input binding: If I choose to move the empty
<!---->comment together with the overlay, my input binding seems to stop working. Pressing Change text does not change the random number I pass to the component. Output binding still works fine in this scenario.Incorrect destruction: If I don't move the empty comment, Angular fails to clean up the component when the visibility is hidden using the Toggle visiblity button. That said, while the component is alive both input and output binding remains functional.
If anyone knows how to get this to work, I'd greatly appreciate some help. I did see other methods of creating overlays using factory resolvers and detaching views, but being able to move the component while preserve bindings in the HTML template will save us a lot of time otherwise spent on changing a lot of components.
Edit: I forgot to mention that the error Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. occurs when attempting to remove the overlay without the moved comment. Angular is attempting to delete a #comment element from the overlay, but it fails to do so because the comment is still in the div where the overlay template resides. That's the reason I tried to move the comment together with the overlay.
