Creating a Filter Pipe in Angular 8

Question

I have some experience working in web dev but I am very new to Angular. I am trying to create a simple filter to filter one column of a table based on a text input. The problem that I am having is that when you type in a single letter into the text input, all of the results are filtered away.

AnimalsComponent.ts

import { ApiService } from '../api.service';
import { AnimalFilterPipe } from '../animal-filter.pipe'

@Component({
  selector: 'app-animals',
  templateUrl: './animals.component.html',
  styleUrls: ['./animals.component.css'],
  providers: [AnimalFilterPipe]
})
export class AnimalsComponent implements OnInit {
    animals = [];
    constructor(private apiService: ApiService) { }
    ngOnInit() {
        this.apiService.getA().subscribe((data: any[])=>{  
            console.log(data);  
            this.animals = data;  
        })  
    }
}

Animals Filter Pipe

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


@Pipe({
  name: 'animalFilter'
})
export class AnimalFilterPipe implements PipeTransform {

  transform(animals: any, term: string): any {
    //check if the search term is defined
    if(!animals || !term) return animals;

    //return updated animals array
     animals.filter(function(animal){
      return animal.Animal.toLowerCase().includes(term.toLowerCase());
    })
  }

}

Animals.html

<div style="padding: 13px;">
  <form id = "animalFilter">
    <label>Filter by Animal:</label>
    <input type="text" [(ngModel)]= "term" [ngModelOptions]="{standalone: true}"/>
  </form>
    <table>
        <tr>
            <th>Hemisphere</th>
            <th>Type</th>
            <th>Animal</th>
            <th>Seasonality</th>
            <th>Location</th>
            <th>Time</th>
            <th>Price</th>
          </tr>
        <tr *ngFor="let animal of animals | animalFilter:term">
          <td align="center">{{ animal.Hemisphere }}</td>
          <td align="center">{{ animal.Type }}</td>
          <td align="center" >{{ animal.Animal }}</td>
          <td align="center">{{ animal.Seasonality }}</td> 
          <td align="center">{{ animal.Location }}</td>
          <td align="center">{{ animal.Time }}</td>
          <td align="center" *ngIf="animal.Price; else noPrice">{{ animal.Price }} Bells</td>
          <ng-template #noPrice> 
            <td align="center">TBD</td>
          </ng-template>
        </tr>
    </table>
</div>

If anyone could help me and give me some advice about what I need to change and how I can do this better moving forward so that I can create more filter pipes and more custom pipes in general.

Answer 1

You just forgot a return statement in the transform:

return animals.filter(animal => animal.Animal.toLowerCase().includes(term.toLowerCase()));