<p dir="auto">[X] feature request</p>
<p dir="auto">This is a feature I am proposing for a future Angular.</p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Both FormGroup and FormControl provide <code class="notranslate">.valueChanges</code>, and observable stream of changes to the control or group of controls' value. This is very helpful, but it seems to omit the first value (before the first "change") for no particularly good reason other than consistency with the name.</p>
<p dir="auto">This is easily worked around by with something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const x$ = this.aControl.valueChanges.startWith(this.aControl.value);"><pre class="notranslate"><code class="notranslate">const x$ = this.aControl.valueChanges.startWith(this.aControl.value);
</code></pre></div>
<p dir="auto">... which is effective, but verbose and repetitive.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Programmatically, very often when handling a control or group as an observable stream, one wants access to the entire stream from the beginning.</p>
<p dir="auto">Therefore, I request that <code class="notranslate">.valueChanges</code> be supplemented with <code class="notranslate">.values</code>, which would be an Observable that emits both the initial value and changes.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">A search of Github yields numerous cases in published Angular code where something similar to the above pattern appears.</p>
<p dir="auto"><a href="https://github.com/search?q=valueChanges.startWith&amp;ref=simplesearch&amp;type=Code&amp;utf8=%E2%9C%93">https://github.com/search?q=valueChanges.startWith&amp;ref=simplesearch&amp;type=Code&amp;utf8=%E2%9C%93</a></p>
<p dir="auto">All of these, as well as similar code behind countless corporate firewalls, could be tightened up by this API improvement.</p>
<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">I need the ability to dynamic assign <code class="notranslate">Input()</code>'s to <code class="notranslate">HostBinding</code>'s.</p>
<p dir="auto">Use case is allowing a developer to pass a custom css class to attach to the host. Lets think about a modal, I might want the upload modal to look slightly different from my new user modal. I allow the developer to pass a custom css class via input. Currently, there is no clean way to apply that. You end up with code like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  @Input() cssClass: string = '';

  @HostBinding('class')
  get cssClasses(): string {
    let clz = 'drawer';
    clz += ` ${this.cssClass}`;
    return clz;
  }  "><pre class="notranslate"><code class="notranslate">  @Input() cssClass: string = '';

  @HostBinding('class')
  get cssClasses(): string {
    let clz = 'drawer';
    clz += ` ${this.cssClass}`;
    return clz;
  }  
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Some way to accomplish this with the decorator, just spit balling but maybe something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  @HostBinding(`class.${this.cssClass}`)
  @Input() cssClass: string = '';"><pre class="notranslate"><code class="notranslate">  @HostBinding(`class.${this.cssClass}`)
  @Input() cssClass: string = '';
</code></pre></div>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

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

<p dir="auto">Dynamic css applying via decorators</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">NA</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">2.3.x</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<p dir="auto">NA</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.1.x</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
Node 7.x</p>
</li>
</ul>