Change the filter to return all the list if no filter was set, like this:

import { Injectable,Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterBy'
})


@Injectable()
export class FilterByPipe implements PipeTransform {
  transform( array: Array<any>, filterField: string, filterValue: string ): Array<any> {
      if (!filterField || !filterValue) {
         return array;
      }
      if (!array) return [];
      return array.filter(item => item[filterField] == filterValue);
  }
}

I am trying to filter multiple cards in angular using Pipe, filter is working good but when no input value is given it doesn’t display any cards. I want to display all cards when no input is given or when ‘all’ is typed or selected.

filter.pipe.ts

import { Injectable,Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterBy'
})


@Injectable()
export class FilterByPipe implements PipeTransform {
  transform( array: Array<any>, filterField: string, filterValue: string ): Array<any> {
      if (!array) return [];
      return array.filter(item => item[filterField] == filterValue);
  }
}

user.component.html

<hr class="line">
<input #myInput type="text" placeholder="Filter" >
<div style="text-align: center;">
  <h3>MOVIES</h3>
</div>
<hr class="line">


 <div class="container" >
  <div class="row">
    <div class="col-md-3 mx-auto my-5" *ngFor="let card of cards | filterBy: 'title': myInput.value ">
      <mdb-card>
        <mdb-card-img [src]="card.img" alt="Card image cap">
        </mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>{{card.title}}</h4>
          </mdb-card-title>

          <mdb-card-text>
            {{card.description}}
          </mdb-card-text>

          <button mdbBtn color="primary">{{card.buttonText}}</button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

Suggest if there is a easier way to filter cards on selected value.