title: How to use a Search Pipe with a Pipe Group by date
body: <p>I have a list of data grouped by date, but I would like to use a search pipe on a specific key in my data list.</p>
  
  <p>however, when I apply my search filter it works but leaves the grouping dates displayed.</p>
  
  <p>How to make grouping dates not appear if they do not match with the search field ?</p>
  
  <p>For search for name Gene,</p>
  
  <p>Here is the problem :</p>
  
  <pre><code>       Team : 2019-09-18
         Gene
         Team : 2019-20-18
         Team : 2019-18-18
  </code></pre>
  
  <p>What I would like : </p>
  
  <pre><code>      Team : 2019-09-18
        Gene
  </code></pre>
  
  <p><strong>List</strong> :</p>
  
  <pre><code> players  = [{name: 'Gene', team: 'team alpha', date: '2019-09-18T16:45:42' },
               {name: 'Steve', team: 'team gamma', date: '2019-09-18T15:45:42'},
               {name: 'George', team: 'team beta', date: '2019-20-18T12:45:42'},
               {name: 'Paula', team: 'team beta', date: '2019-18-18T15:45:42'},
               {name: 'Jhon', team: 'team gamma', date: '2019-09-18T15:45:42'}];
  </code></pre>
  
  <p>}</p>
  
  <p><strong>Pipe Group by Date</strong> :</p>
  
  <pre><code>   @Pipe({name: 'groupBy'})
      export class GroupByPipe implements PipeTransform {
        transform(collection: Array&lt;any&gt;, property: string): Array&lt;any&gt; {
          if(!collection) {
          return null;
       }
  
  const mappedCollection = collection.map(player =&gt; ({
                             ...player, 
                             date: player.date.split('T')[0]
                           }));
  
  const groupedCollection = mappedCollection.reduce((previous, current)=&gt; {
      if(!previous[current[property]]) {
          previous[current[property]] = [current];
      } else {
          previous[current[property]].push(current);
      }
  
      return previous;
  }, {});
  
     return Object.keys(groupedCollection).map(key =&gt; ({ key, value: 
  groupedCollection[key] }));
   }
  }
  </code></pre>
  
  <p><strong>Pipe Search</strong> :</p>
  
  <pre><code> @Pipe({
    name: 'searchPipe',
   })
    export class SearchPipe implements PipeTransform {
      public transform(value, keys: string, term: string) {
  
    if (!term) return value;
    return (value || []).filter(item =&gt; keys.split(',').some(key =&gt; item.hasOwnProperty(key) &amp;&amp; new RegExp(term, 'gi').test(item[key])));
  
    }
   }
  </code></pre>
  
  <p><strong>Html :</strong> </p>
  
  <pre><code>  &lt;input [(ngModel)]="search"&gt;
       &lt;ul&gt;
        &lt;div *ngFor="let player of players | groupBy:'date'"&gt; Team : 
    {{player.key}}
        &lt;li *ngFor="let eachplayer of player.value | searchPipe: 'name': search"&gt;
    {{eachplayer.name}}
     &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://stackblitz.com/edit/angular-p9pemv" rel="nofollow noreferrer">Stackbiltz demo</a></p>