title: Trigger valueChange with Initialized value - angular2
body: <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>