title: Managing multiple where conditions with Firestore
body: <p>I am fetching results from my <code>collection</code> using <strong>3 search fields</strong>. </p>
  
  <p>If <code>this.tag</code> is empty I don't want this <code>.where("tagarray", "array-contains", this.tag)</code> to work, similarly if <code>this.dt</code> is empty <code>.where('lastActivityDate', '&gt;=', this.dt)</code> should not work. Same for <code>this.leadstage</code>.</p>
  
  <p>How do I manage this condition ?</p>
  
  <pre><code>  loadItems(){
      this.firestore.collection('leads' , ref =&gt; ref 
  .where("tagarray", "array-contains", this.tag) 
  .where('lastActivityDate', '&gt;=', this.dt) 
  .where("leadstage" , "==" , this.leadstage) 
  </code></pre>
  
  <h2>Edit 1</h2>
  
  <p>My entire code of this function</p>
  
  <pre><code>loadItems(){
  this.firestore.collection('leads' , ref =&gt; ref 
  .where("tagarray", "array-contains", "tag1") //tag success
  .where('lastActivityDate', '&gt;=', '07-APR-2020') //date success
  .where("leadstage" , "==" , 'Prospect') // leadstage success, this is case sensitive
  .limit(5)
  ).snapshotChanges()
  .subscribe(response =&gt; {
  if(!response.length){
    console.log("no data available");
    return false;
  }
  this.tableData = [];
  for(let item of response){
    var data = Object.assign(item.payload.doc.data(), {id : item.payload.doc.id})
    this.tableData.push(data);
  
  ...
  </code></pre>
  
  <h2>Edit 2</h2>
  
  <p>Screenshot of error</p>
  
  <p><a href="https://i.stack.imgur.com/ASFZA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ASFZA.png" alt="enter image description here"></a></p>
  
  <h2>Edit 3</h2>
  
  <p>Current code </p>
  
  <pre><code>    this.firestore.collection('leads' , (ref) =&gt; {
        let query = ref;
        if (this.tag) {
          query = query.where("tagarray", "array-contains", this.tag) 
        }
        if (this.dt) {
          query = query.where('lastActivityDate', '&gt;=', this.dt) 
        }
        if (this.leadstage) {
          query = query.where("leadstage" , "==" , this.leadstage) 
        }
        return query; 
      }
      )
      .limit(5)
  .snapshotChanges()
  .subscribe(response =&gt; {
  if(!response.length){
    console.log("no data available");
    return false;
  }
  ...
  </code></pre>
  
  <p>Errors:</p>
  
  <blockquote>
    <p>Type 'Query' is missing the following properties from
    type 'CollectionReference': id, parent, path, doc,
    addts(2739)</p>
    
    <p>Property 'limit' does not exist on type
    'AngularFirestoreCollection'.ts(2339)</p>
  </blockquote>