Trigger valueChange with Initialized value - angular2
<p>I'm writing an angular2 application and I'm stuck with something.
First of all, I have a select which is bind to a <code>formControl</code> :</p>
<pre class="lang-js prettyprint-override"><code>export class MyComponent implements OnInit {

  profilesBy: Observable&lt;any[]&gt;;
  myControl = new FormControl();

  constructor(public http: Http) {
    this.profilesBy = this.myControl.valueChanges
      .map(text =&gt; new formatQuery(text.value))
      .switchMap(body =&gt; this.getGroupBy(body, this.url), (_, res)=&gt; res.json().aggregations.group_by_type.buckets);
  }
}  
</code></pre>
<p>so, <code>myControl</code> is the <code>formControl</code>, and <code>profilesBy</code> is an Observable of an array.<br />
The <code>formatQuery</code> just format a body for the query using the value of the select and <code>getGroupBy</code> return an <code>http</code> request (ie : http.post(url, body) ... ).<br />
Then I assign the response : <code>res.json().aggregations.group_by_type.buckets</code><br />
But don't give too much thought about this.</p>
<p>Here is my template :</p>
<pre class="lang-html prettyprint-override"><code>&lt;md-card&gt;
    &lt;h4&gt;Profiles group by :
        &lt;select [formControl]=&quot;myControl&quot;&gt;
            Some options ...
        &lt;/select&gt;
    &lt;/h4&gt;

    &lt;div *ngFor=&quot;let profile of profilesBy | async&quot;&gt;
        &lt;strong&gt;{{profile.key}} :&lt;/strong&gt; {{profile.doc_count | number:'1.0-2'}}
    &lt;/div&gt;
&lt;/md-card&gt;
</code></pre>
<p>And it works just fine when the user selects a value, it triggers the <code>valueChanges</code> and chains the actions!</p>
<p>So I'm happy with it. I think this is an elegant way to do so, instead of using <code>ngOnChanges()</code></p>
<p>Now here is where I can't find a way to make it works. Basically, I want to initialize the select with a value and trigger (without any user action) the <code>valueChange</code></p>
<p>I tried to used [(ngModel)] : <code>&lt;select [formControl]=&quot;myControl&quot; [(ngModel)]=&quot;selectedGroupBy&quot;&gt;</code>
but it didn't trigger the it.</p>
<p>Last, I tried to make the call myself in the method <code>ngOnInit()</code></p>
<pre class="lang-js prettyprint-override"><code>this.getGroupBy(new formatQuery(this.selectedGroupBy.value), this.url)
       .subscribe((response) =&gt; {
         this.profilesBy = response.json().aggregations.group_by_type.buckets;
       });
</code></pre>
<p>But I got a <code>Array</code> instead of an <code>Observable of Array</code>! What do I miss?
How can I make it work?</p>
<hr />
<p>Possible solution using <a href="http://reactivex.io/rxjs/class/es6/Observable.js%7EObservable.html#instance-method-startWith" rel="noreferrer">startWith</a></p>
<pre class="lang-js prettyprint-override"><code>this.profilesBy = this.myControl.valueChanges
      .startWith(DEFAULT)
      .map(text =&gt; new formatQuery(text.value))
      .switchMap(body =&gt; this.getGroupBy(body, this.url), (_, res)=&gt; res.json().aggregations.group_by_type.buckets);
</code></pre>