<p dir="auto">I would like to apply a directive conditionally through something like [class.draggable]="someBool" with '.draggable' as the selector on the directive, but this is not supported. What then is the recommended way to conditionally apply a directive on an existing element? Do I use an attribute for the selector and pass in the boolean as an input (i.e. the directive is always "active")? I'd prefer not to use ng-ifs with duplicate elements everywhere. Is there a cleaner way to attach and detach a behavior?</p>
<p dir="auto">The metadata extractor allows this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export function FACTORY(parentDispatcher: ViewportRuler) {
  return parentDispatcher || new ViewportRuler();
};"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-smi">FACTORY</span><span class="pl-kos">(</span><span class="pl-s1">parentDispatcher</span>: <span class="pl-smi">ViewportRuler</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">parentDispatcher</span> <span class="pl-c1">||</span> <span class="pl-k">new</span> <span class="pl-smi">ViewportRuler</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">But not this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const FACTORY = (parentDispatcher: ViewportRuler) =&gt; {
  return parentDispatcher || new ViewportRuler();
};"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">FACTORY</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">parentDispatcher</span>: <span class="pl-smi">ViewportRuler</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">parentDispatcher</span> <span class="pl-c1">||</span> <span class="pl-k">new</span> <span class="pl-smi">ViewportRuler</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The latter results in</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Error encountered resolving symbol values statically. 
Function calls are not supported. 
Consider replacing the function or lambda with a reference to an exported function 
(position 59:48 in the original .ts file), 
resolving symbol VIEWPORT_RULER_PROVIDER_FACTORY in..."><pre class="notranslate"><code class="notranslate">Error: Error encountered resolving symbol values statically. 
Function calls are not supported. 
Consider replacing the function or lambda with a reference to an exported function 
(position 59:48 in the original .ts file), 
resolving symbol VIEWPORT_RULER_PROVIDER_FACTORY in...
</code></pre></div>
<p dir="auto">Note from <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chuckjaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/chuckjaz">@chuckjaz</a>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="The reason we don't today is because we blindly inline local references. 
What we should should only conditionally inline (simplify) exported constants."><pre class="notranslate"><code class="notranslate">The reason we don't today is because we blindly inline local references. 
What we should should only conditionally inline (simplify) exported constants.
</code></pre></div>