title: Property 'select' does not exist on type '{}'
body: <p>I am new in Angular and trying to make an ecommerce project so I want to filter my products based on what is in queryParams of the URL.</p>
  
  <p>So lets say I have URL as</p>
  
  <pre><code>http://localhost:4200/?category=Fruits
  </code></pre>
  
  <p>so it should filter all the products of category as Fruits</p>
  
  <p>Here is the code for that</p>
  
  <p>html File</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row "&gt;
    &lt;div class="col-md-3"&gt;
      &lt;ul class="list-group" &lt;a *ngFor="let c of categories" class="list-group-item" routerLink="/" routerLinkActive="active" [queryParams]="{category:c.name}"&gt;
        {{c.name}}
        &lt;/a&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;div class="row"&gt;
        &lt;ng-container *ngFor="let p of products;let i=index" class="row-eq-height"&gt;
          &lt;div class="col"&gt;
            &lt;mdb-card style="width:17rem;" class="c1"&gt;
              &lt;div class="view rgba-white-slight waves-light" mdbWavesEffect&gt;
                &lt;mdb-card-img [src]="p?.imageurl" alt="Card image cap" class="cardimg"&gt; &lt;/mdb-card-img&gt;
                &lt;a&gt;
                  &lt;div class="mask"&gt;&lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;mdb-card-body&gt;
                &lt;mdb-card-title&gt;
                  &lt;h4&gt;{{p?.title}}&lt;/h4&gt;
                &lt;/mdb-card-title&gt;
                &lt;mdb-card-text&gt;$ {{p?.price}}
                &lt;/mdb-card-text&gt;
                &lt;button mdbBtn type="button" color="primary" size="sm" mdbWavesEffect&gt;Add to Cart&lt;/button&gt;
              &lt;/mdb-card-body&gt;
            &lt;/mdb-card&gt;
          &lt;/div&gt;
  
        &lt;/ng-container&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>.component.ts</p>
  
  <pre><code>import { ActivatedRoute } from '@angular/router';
  import { Subscription } from 'rxjs';
  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ProductsService } from '../services/products.service';
  import { ItemsService } from '../services/items.service';
  import { filter } from 'rxjs/operators';
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  
  export class HomeComponent implements OnInit {
    products;
    categories;
    query;
    filteredproducts;
    subscription: Subscription;
  
    constructor(private prservice: ProductsService, private iservice: ItemsService, private activatedrouter: ActivatedRoute) { }
  
  
    ngOnInit() {
      this.subscription = this.iservice.getdata().subscribe(data =&gt; {
        this.products = data;
        console.log(this.products)
      });
  
      this.subscription = this.iservice.getitems().subscribe(categ =&gt; {
        this.categories = categ;
      });
  
      this.activatedrouter.queryParams.subscribe(p =&gt; {
        this.query = p['category'];
        console.log(this.query)
  
        this.filteredproducts = this.products.pipe(filter(p =&gt; p.select === this.query));
        console.log(this.filteredproducts)
  
      });
    }
  
    OnDestroy() {
      this.subscription.unsubscribe();
    }
  }
  </code></pre>
  
  <p>So here is the screenshot of my products that I get in my console 
  <a href="https://ibb.co/FnKDvsk" rel="nofollow noreferrer">https://ibb.co/FnKDvsk</a></p>
  
  <p>And now I have applied filter function to the "select" to filter the products</p>
  
  <p>The errors I am facing are</p>
  
  <ol>
  <li>Cannot read property 'pipe' of undefined</li>
  <li>Property 'select' does not exist on type '{}'.</li>
  </ol>