title: Angular2 Cascading Select
body: <p>In Angular2, I want to create a cascading select for the given array object of xs and ys:</p>
  
  <pre class="lang-ts prettyprint-override"><code>data:Array&lt;Object&gt; = 
    [
      {"x":50, "ys":[ 10, 15, 20, 25, 30, 35]},                                                                                                           
      {"x":75, "ys":[ 15,20,25,30,35,40,45]}
    ];
  </code></pre>
  
  <p>The first select is populated with x and second with the corresponding ys. </p>
  
  <p>Following is the select code for x.</p>
  
  <pre class="lang-ts prettyprint-override"><code>  &lt;select [(ngModel)]="x"&gt; 
      &lt;option *ngFor="#n of data" [attr.value]="n.x"&gt;{{n.x}}&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>How to polulate the second select with ys based on the selcted x value?</p>
  
  <p>I have created a <a href="https://plnkr.co/edit/WPNOivnmhrvKRWnFzX3V?p=preview" rel="nofollow">plunkr</a></p>