<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<p dir="auto">[x ] bug report =&gt; search github for a similar issue or PR before submitting</p>
<p dir="auto"><strong>Current behavior</strong><br>
A template that refers to a static property of the component class from formGroup as below fails with "formGroup expects a FormGroup instance. Please pass one in" in Angular 4. Works if the property is a non-static instance member.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div [formGroup]=&quot;metaFormGroup&quot;&gt;
          ...
&lt;/div&gt;

export class TestHostComponent implements OnInit {
  public static readonly metaFormGroup: FormGroup = new FormGroup({
    ...
  });
 ...
};"><pre class="notranslate"><code class="notranslate">&lt;div [formGroup]="metaFormGroup"&gt;
          ...
&lt;/div&gt;

export class TestHostComponent implements OnInit {
  public static readonly metaFormGroup: FormGroup = new FormGroup({
    ...
  });
 ...
};
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
The template should be able to refer to static members of a component, just like it can refer to instance members.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.0</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Browser:</strong>  Chrome</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> Typescript 2.2.1</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   7.6</p>
</li>
</ul>
<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>