title: Angular 6: Dropdown display option base on other dropdown value
body: <p>I have 2 dropdowns, one to select <em>state</em> and the other for <em>service agency</em>. The options displayed for <em>service agency</em> depends on the <em>state</em> selected value. </p>
  
  <p>Data for <em>service agency</em> and <em>state</em> dropdowns are get from <code>profile.service.ts</code>.</p>
  
  <p><b>Problem:</b> How I can make the value display in service agency change when user select state.</p>
  
  <p><b>profile.component.html</b></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
      &lt;mat-select placeholder="Service Agency" required formControlName="serviceAgency"&gt;
          &lt;mat-option value="option"&gt;Option&lt;/mat-option&gt;
          &lt;mat-option value="{{item.id}}" *ngFor="let item of service_agency$"&gt;                     
              {{item.name}}  
          &lt;/mat-option&gt;  
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><b>profile.component.ts</b></p>
  
  <pre class="lang-js prettyprint-override"><code>//get state
  get_state(){
      this.profileService.get_state().subscribe(data =&gt; {  
          this.state$ = data; 
      });  
  }
  
  //get service center base on state id
  onChange(state) {
     this.service_agency$ = this.profileService.get_service_agency()
         .pipe(filter((item)=&gt; item == state.value));
  
      console.log(this.service_agency$);
  }
  </code></pre>
  
  <p><b>profile.service.ts</b></p>
  
  <pre class="lang-js prettyprint-override"><code>get_state() {
      return this.http.get(url)
          .pipe(map(data =&gt; {
              return data;
          }));
  }
  
  get_service_agency() {
      return this.http.get(url)
          .pipe(map(data =&gt; {
              return data;
          }));
  }
  </code></pre>