title: Query Params Angular 5 routes error
body: <p>I am trying to use <code>query params</code> in angular which uses data provided by service and filter the products in the shop page.</p>
  
  <p>In my shop component - </p>
  
  <pre><code>ngOnInit() {
  this.productList = this.productservice.getProducts();
  
  this.activatedRoute.queryParams
    .subscribe(queryParams =&gt; {
      if (queryParams.type === 'jeans') {
         let filteredProduct = this.productList.find(product=&gt; product.productCat == 'Jeans');
         console.log(filteredProduct);
      } else if(queryParams.type === 'shirts') {
         let filteredProduct = this.productList.find(product=&gt; product.productCat == 'Shirts');
         console.log(filteredProduct);
      }
    });
  }
  
  redirectPage(value){
      this.router.navigate(['/shop' ,'value']);
      this.activatedRoute.snapshot.paramMap.get('type');
  }
  </code></pre>
  
  <p>In my Other component. I am providing the router link - </p>
  
  <pre><code>&lt;a [routerLink]="['/shop']" [queryParams]="{ type: 'jeans'}" (click)="redirectPage('jeans')"&gt;Jeans&lt;/a&gt;
  </code></pre>
  
  <p>I am giving a path - </p>
  
  <pre><code>{path: 'shop/:type', component: ShopComponent},
  </code></pre>
  
  <p>So when the click the anchor tag jeans. The url which shows is <code>http://localhost:4200/shop?type=jeans</code> but I am getting an error - <code>Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shop'</code></p>
  
  <p>I am getting the correct data in console log for this logic <code>let filteredProduct = this.productList.find(product=&gt; product.productCat == 'Jeans');</code> but I think there is some mistake I'm doing with queryparams or path. </p>
  
  <p>In shop component I have used <code>*ngFor</code> for product categories (productCat). Is this causing the problem? -</p>
  
  <pre><code>&lt;div class="col-md-10 shop-products" *ngFor="let prod of productList"&gt;
          &lt;div class="shop-products-headline"&gt;
              &lt;h3&gt;{{prod.productCat}}&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="row shop-products-listing"&gt;
              &lt;div class="col-md-4" *ngFor="let product of prod.product"&gt;
                  &lt;div class="sp-list-inner"&gt;
                      &lt;figure&gt;
                          &lt;a href="#"&gt;
                              &lt;img src="{{product.productImage}}" alt="{{product.productImageAlt}}"&gt;
                              &lt;figcaption&gt;
                                  &lt;h5 class="product-inner-title"&gt;{{product.productName}}&lt;/h5&gt;
                                  &lt;p class="product-inner-price"&gt;
                                      &lt;span class="new-price"&gt;&lt;i class="fa fa-inr" aria-hidden="true"&gt;&lt;/i&gt;{{product.newPrice}}&lt;/span&gt;
                                      &lt;span class="old-price"&gt;&lt;i class="fa fa-inr" aria-hidden="true"&gt;&lt;/i&gt;{{product.oldPrice}}&lt;/span&gt;
                                      &lt;span class="you-save"&gt;you save &lt;i class="fa fa-inr" aria-hidden="true"&gt;&lt;/i&gt;{{product.oldPrice - product.newPrice}}&lt;/span&gt;
                                  &lt;/p&gt;
                              &lt;/figcaption&gt;
                          &lt;/a&gt;
                      &lt;/figure&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>