title: Angular router navigate doesn't load page when query parameters change
body: <p>I have a component that display the result of an API query. I want to add a dropdown box so the list can be filtered but I can't seem to get the page to reload when the url query parameters change.</p>
  
  <pre><code>&lt;div&gt;
    &lt;H2&gt;Products&lt;/H2&gt;
    &lt;form&gt;
      Filter By Manufacturer
      &lt;select (change)="onManufacturerChange($event.target.value)"&gt;
        &lt;option value=""&gt;All&lt;/option&gt;
        &lt;option [value]="m" *ngFor="let m of manufacturers"&gt;{{m}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/form&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let p of products"&gt;&lt;B&gt;{{p.manufacturer}}&lt;/B&gt; - {{p.name}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Typescript</p>
  
  <pre><code>export class ProductListComponent implements OnInit {
  
    public products: Array&lt;object&gt; = [];
    public manufacturers: any = [];
    public manufacturer: string = "";
    public search: string = "";
  
    constructor(private _assetService: AssetService, private router: Router, private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.route.queryParams.subscribe(params =&gt; {
        console.log(params);
        if('manufacturer' in params){
          this.manufacturer = params.manufacturer;
        }
        if('search' in params){
          this.search = params.search;
        }
      })
  
      this._assetService.getManufacturers().subscribe(data =&gt; {
        this.manufacturers = data;
      })
  
      this.loadProducts(); 
    }
  
    loadProducts(){
        this._assetService.getProducts(this.manufacturer,this.search).subscribe((data: ProductListResult) =&gt; {
        this.products = data.products;
      }) 
    }
  
    onManufacturerChange(newValue){
      this.router.navigate(['/products'], {queryParams: {manufacturer: newValue}});
    }
  }
  </code></pre>
  
  <p>When I change the item selected in the drop down box the URL displayed in the browser changes but the page does not reload. If I refresh the browser manually with the desired URL the correct output is shown. If I change the  path in route.navigate to a totally different route that works correctly. If I add a call to <code>loadProducts()</code> after router navigate some it reloads the page but one selection out of phase.</p>
  
  <p>Everything I've read says that if the array referenced in ngFor changes it should automagically update the DOM but I can't seem to trigger it. Do I need to call some sort of refresh or invalidate routine to update the DOM? Do I need to set something in the router to recognize changes to the query parameters? Am I going about this all wrong?</p>