<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
you need to use <code class="notranslate">constructor</code></p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
perhaps <code class="notranslate">$class</code></p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="http://plnkr.co/edit/JK1FbSomU15KgKU64Tr1?p=preview" rel="nofollow">http://plnkr.co/edit/JK1FbSomU15KgKU64Tr1?p=preview</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
you have to use <code class="notranslate">constructor</code></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
to have access to static data</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> Chrome</li>
<li><strong>Language:</strong> TypeScript</li>
</ul>
<p dir="auto"><a href="http://plnkr.co/edit/JK1FbSomU15KgKU64Tr1?p=preview" rel="nofollow">http://plnkr.co/edit/JK1FbSomU15KgKU64Tr1?p=preview</a><br>
related <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="111270690" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/4707" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/4707/hovercard" href="https://github.com/angular/angular/issues/4707">#4707</a></p>
<p dir="auto"><a href="https://tipe.io?ref=github-comment" rel="nofollow"><img src="https://user-images.githubusercontent.com/1016365/34912701-7edec34c-f89c-11e7-8c89-bed6cef064b5.png" alt="github-tipe-logo" style="max-width: 100%;"></a></p>
<h2 dir="auto">I'm submitting a...</h2>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:"><pre class="notranslate"><code class="notranslate">
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
</code></pre></div>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">Templates cannot refer to anything not directly associated with the component, so you can't for example do this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div *ngIf=&quot;user.id === someConstant&quot;&gt;
&lt;/div&gt;
&lt;div *ngIf=&quot;user.status === UserStatus.Active&quot;&gt;  &lt;!-- UserStatus is an enum --&gt;
&lt;/div&gt;
&lt;div *ngIf=&quot;isDevMode()&quot;&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ngIf</span>="<span class="pl-s">user.id === someConstant</span>"<span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ngIf</span>="<span class="pl-s">user.status === UserStatus.Active</span>"<span class="pl-kos">&gt;</span>  <span class="pl-c">&lt;!-- UserStatus is an enum --&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ngIf</span>="<span class="pl-s">isDevMode()</span>"<span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">To make this work, I have to declare these as members of my component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { someConstant } from './somewhere';
import { UserStatus } from './somewhere';
import { isDevMode } from '@angular/core';

export class MyComponent {
  public someConstant = someConstant;
  public UserStatus = UserStatus;
  public isDevMode = isDevMode;
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">someConstant</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./somewhere'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">UserStatus</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./somewhere'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">isDevMode</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-kos">{</span>
  <span class="pl-k">public</span> <span class="pl-c1">someConstant</span> <span class="pl-c1">=</span> <span class="pl-s1">someConstant</span><span class="pl-kos">;</span>
  <span class="pl-k">public</span> <span class="pl-c1">UserStatus</span> <span class="pl-c1">=</span> <span class="pl-smi">UserStatus</span><span class="pl-kos">;</span>
  <span class="pl-k">public</span> <span class="pl-c1">isDevMode</span> <span class="pl-c1">=</span> <span class="pl-s1">isDevMode</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">These can quickly clutter the component code, and can't be used for const enums. For const enums I have to duplicate the entire enum into a constant, which becomes a maintenance headache.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">It would be helpful if I could use constants, enums and functions directly from within the template, without needing to assign them to a component member. Maybe a way of importing variables/types into the HTML, or declaring types in the component that are available to the template. Something like this perhaps:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { someConstant } from './somewhere';
import { UserStatus } from './somewhere';
import { isDevMode } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  templateImports: [someConstant, UserStatus, isDevMode]
})"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">someConstant</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./somewhere'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">UserStatus</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./somewhere'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">isDevMode</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

@<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">'app-user-list'</span><span class="pl-kos">,</span>
  <span class="pl-c1">templateUrl</span>: <span class="pl-s">'./user-list.component.html'</span><span class="pl-kos">,</span>
  <span class="pl-c1">templateImports</span>: <span class="pl-kos">[</span><span class="pl-s1">someConstant</span><span class="pl-kos">,</span> <span class="pl-smi">UserStatus</span><span class="pl-kos">,</span> <span class="pl-s1">isDevMode</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">(this particular solution wouldn't work for const enums, other solutions may be better)</p>
<h2 dir="auto">Environment</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
Angular CLI: 6.1.2
Node: 8.11.1
OS: linux x64
Angular: 6.1.1"><pre class="notranslate"><code class="notranslate">
Angular CLI: 6.1.2
Node: 8.11.1
OS: linux x64
Angular: 6.1.1
</code></pre></div>