title: Angular 7 populate dropdown list by previously selected item id
body: <p>I'm new to angular 7 material design and I'm working on a multi drop down list. </p>
  
  <p>So I have 2 dropdown lists in total where the second one requires the id of the first. </p>
  
  <p>This is so that the list of items in the second dropdown would narrow down based on the previously selected item. I'm not sure how to go about doing this, and any help is much appreciated.</p>
  
  <blockquote>
    <p>service</p>
  </blockquote>
  
  <pre><code>   getAllMarkets(){
     return this.http.get(this.url + 'allMarkets')
    }
  
     getProducts(id: number){
     return this.http.get(this.url + 'products')
    }
  </code></pre>
  
  <blockquote>
    <p>.ts</p>
  </blockquote>
  
  <pre><code>markets;
  products;
  
  ngOnInit() {
  this.getMarkets();
  this.getFilteredProducts();
  }
  
  getMarkets() {
  return this.service.getAllMarkets().subscribe(res =&gt; {
  this.markets = res;
  });
  }
  
  getFilteredProducts() {
  return this.service.getProducts(Not sure how to pass id).subscribe(res =&gt; {
  this.products = res;
  });
  }
  </code></pre>
  
  <blockquote>
    <p>.html</p>
  </blockquote>
  
  <pre><code>&lt;mat-form-field&gt;
        &lt;mat-select placeholder="Markets" [(ngModel)]="selectedMarket" name="market"&gt;
          &lt;mat-option *ngFor="let market of markets" [value]="market.id" &gt;
            {{market.name}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field&gt;
          &lt;mat-select placeholder="Products" [(ngModel)]="selectedProducts" name ="product"&gt;
            &lt;mat-option *ngFor="let product of products" [value]="product.id"
            &gt;
              {{product.name}}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
  </code></pre>