Angular2 render component to body
<p>Say I have an Angular2 component <code>&lt;my-button&gt;</code> and I want to give  an input for options to render in a dropdown menu shown when the button is clicked. I have the menu component as <code>&lt;my-menu&gt;</code> and it renders conditionally in the template of <code>&lt;my-button&gt;</code> if there are options passed in.</p>

<p>Maybe I can just absolutely position <code>&lt;my-menu&gt;</code> within <code>&lt;my-button&gt;</code> to achieve the desired positioning. But maybe I can't because I have <code>overflow:hidden</code> on a containing element and that would clip <code>&lt;my-menu&gt;</code>. So instead I need to render <code>&lt;my-menu&gt;</code> in <code>&lt;body&gt;</code> and position it absolutely to <code>&lt;my-button&gt;</code>.</p>

<p>Is there a way to render <code>&lt;my-menu&gt;</code> to <code>&lt;body&gt;</code> even though it is placed inside the template for <code>&lt;my-button&gt;</code> instead?</p>

<p>Thanks! </p>