title: Angular Material table, how to filter a Date of type moment.Moment
body: <p>I have a mat-table and a search field, where I Filter the results.</p>
  
  <p>The dataSource variable is populated by a nested object, so I had to setup a <code>filterPredicate</code> to make the filter work on the nested object properties.</p>
  
  <p>Everything works, but I also have a field that is for a date.</p>
  
  <p>The date I retrieve is of type <code>moment.Moment</code> and looks like this:</p>
  
  <pre><code>date: Moment
  _d: Sat Sep 22 2018 00:00:00 GMT+0200 {}
  _i: "2018-9-22"
  _isAMomentObject: true
  _isUTC: false
  _isValid: true
  _locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _ordinal: "%d.", _dayOfMonthOrdinalParse: /\d{1,2}\./, …}
  _pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
  __proto__: Object
  </code></pre>
  
  <p>The sort works on this date, I Can sort the date column without issue, but when I type in the filter, I can't filter out by using the date, which is piped in the html like this:</p>
  
  <pre><code>{{element.date | date : "shortDate"}}
  </code></pre>
  
  <p>so what can I do to being able to filter the dates by how they are displayed in the table with this pipe? </p>
  
  <p>Thank you</p>
  
  <p>edit: filter code:</p>
  
  <pre><code>nestedFilterCheck(search, data, key): any {
          if (typeof data[key] === "object") {
              for (const k in data[key]) {
                  if (data[key][k] !== null) {
                      search = this.nestedFilterCheck(search, data[key], k);
                  }
              }
          } else {
              search += data[key];
          }
          return search;
      }
  
  this.dataSource.filterPredicate = (data, filter: string) =&gt; {
                  const accumulator = (currentTerm, key) =&gt; {
                      return this.nestedFilterCheck(currentTerm, data, key);
                  };
                  const dataStr = Object.keys(data)
                      .reduce(accumulator, "")
                      .toLowerCase();
                  const transformedFilter = filter.trim().toLowerCase();
                  return dataStr.indexOf(transformedFilter) !== -1;
              };
  
  applyFilter(filterValue: string): void {
          filterValue = filterValue.trim();
          filterValue = filterValue.toLowerCase();
          this.dataSource.filter = filterValue;
      }
  
   &lt;input matInput #filter (keyup)="applyFilter($event.target.value)"&gt;
  </code></pre>