<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ 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 =&gt; search github for a similar issue or PR before submitting
[ 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></p>

<p dir="auto"><code class="notranslate">AbstractControl.get</code> allows a flexible <code class="notranslate">path</code> parameter, for specifying the required descendent <code class="notranslate">AbstractControl</code> to return.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto"><code class="notranslate">AbstractControl.getChild&lt;T&gt;(key: keyof T)</code> would allow additional type safety, in the case where the required <code class="notranslate">AbstractControl</code> is a direct child of the instance <code class="notranslate">AbstractControl</code>-derived parent.</p>
<p dir="auto"><em>Here, <code class="notranslate">T</code> refers to the type of the data model, i.e. the type of <code class="notranslate">AbstractControl.value</code>.</em></p>
<p dir="auto"><em>In fact, this method is probably only suitable for <code class="notranslate">FormGroup</code>.</em></p>
<p dir="auto">Further, the following signature:<br>
<code class="notranslate">AbstractControl.getChild&lt;T, C extends AbstractControl&gt;(key: keyof T): C | null</code><br>
would allow the caller to indicate the expected sub-type of <code class="notranslate">AbstractControl</code> to be returned.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Reduce the risk of typos in the string value passed to the proposed <code class="notranslate">getChild</code> method.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

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

<ul dir="auto">
<li><strong>Browser:</strong> [ all ]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [ TypeScript 2.X ]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto">As far as I can tell there is no good way to make a decorator conditionally applied. My experience is with Angular 2 in Dart, for an internal app (zny@). This is a feature request for some template syntax or something similar (maybe an automatically generated input for all directives like applyDirectiveName?) to allow for a decorator to be conditionally applied to an element.</p>
<p dir="auto">There are several possible workarounds in lieu of this feature, all of which are significantly bad:</p>
<ul dir="auto">
<li>Duplicate the code in the template, and have one version with the decorator, one without. This is bad because it requires duplication, and if there's content inside the decorated element it could be a lot of duplication.</li>
</ul>
<p dir="auto"><code class="notranslate">&lt;div *ngIf="condition" decorator&gt;lots-of-content-goes-here&lt;/div&gt;</code><br>
<code class="notranslate">&lt;div *ngIf="!condition"&gt;lots-of-content-goes-here&lt;/div&gt;</code></p>
<ul dir="auto">
<li>Add an input to the decorator that turns it on or off. This is bad because it requires an extraneous input just to say "don't do anything at all" and can be confused with similar inputs (e.g. a button decorator that has a disabled input). Also bad because you may be using a decorator from a library or some such where you cannot easily add this yourself.</li>
</ul>
<p dir="auto"><code class="notranslate">&lt;div decorator decorator-input="condition"&gt;content&lt;/div&gt;</code></p>
<ul dir="auto">
<li>Create a base class for the decorator and have it share most stuff, where one impl takes a conditional input and the other doesn't, this is impossible to do well because you cannot share the properties passed to the decorator: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="127573159" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/6575" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/6575/hovercard" href="https://github.com/angular/angular/issues/6575">#6575</a></li>
<li>Create a component that wraps the content twice, once with decorator and once without, and then ngIf between the two based on the conditional. This is impossible because you cannot project the same content twice into an ng-content (see e.g. this comment for some discussion, I didn't open an issue because this appears to be by design: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="110664199" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/4631" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/4631/hovercard?comment_id=147007261&amp;comment_type=issue_comment" href="https://github.com/angular/angular/issues/4631#issuecomment-147007261">#4631 (comment)</a> )</li>
</ul>
<p dir="auto">`@Component(selector: 'conditional-decorator-wrapper',<br>
directives: const [ExampleDecorator],<br>
template: '&lt;div *ngIf="condition" exampleDecorator&gt;</p>
<div dir="auto"></div>')`
`class ConditionalDecoratorWrapperComponent {}`