<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[x] feature request"><pre class="notranslate"><code class="notranslate">[x] bug report
[x] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Setting animation on a the host is not supported.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Enable a component to apply animation on it's own host element.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
While usually the host will have it's animation from the parent component via template syntax, there is possibility to insert a component using the <code class="notranslate">ComponentResolver -&gt; ComponentFactory</code>. The only way to control host properties/attributes is by applying <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hostxxx/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/hostxxx">@hostxxx</a> decorators on setting the <code class="notranslate">host</code> component metadata property.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'modal-backdrop[@fade=fadeState]',
    host: {
       '@myTrigger': 'myTriggerProp',
       '[@myTrigger1]': 'myTriggerProp1'
    },
    ..."><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'modal-backdrop[@fade=fadeState]'</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
       <span class="pl-s">'@myTrigger'</span>: <span class="pl-s">'myTriggerProp'</span><span class="pl-kos">,</span>
       <span class="pl-s">'[@myTrigger1]'</span>: <span class="pl-s">'myTriggerProp1'</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    ...</pre></div>
<p dir="auto">None of the above work.</p>
<p dir="auto">My use case is in a Modal/Dialog window, where a top level component is the container of the overlay, backdrop and dialog itself.</p>
<p dir="auto">The top level component does not have actual UI thus no animation. When closing I destroy the top level component via <code class="notranslate">componentRef.destroy()</code>.  Animation triggers are set on child components but the do not trigger.<br>
I guess I can enter an intermediate state in the top level component, the fires a close event and wait for everything to finish but that seems manual...</p>
<p dir="auto">I'm not sure if there's an issue, and if there is - is it using <code class="notranslate">@tigger</code> attributes on the host or having the host remove all children, wait for animation and then dispose, which is also problematic...</p>