javascript - Creating a Filter Pipe in Angular 8 - Stack Overflow

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: './animalsponent.html',
  styleUrls: ['./animalsponent.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.

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.ponent.html',
  styleUrls: ['./animals.ponent.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.

• javascript
• html
• angular
• web

Share Improve this question Follow asked Apr 13, 2020 at 12:16 Aidan BakerAidan Baker 5722 silver badges88 bronze badges 4

• You need code review for this? – Lemmy Commented Apr 13, 2020 at 12:17
• So you need to start filtering when you type multiple letters? Please describe the behavior you want to get – Guerric P Commented Apr 13, 2020 at 12:28
• @GuerricP so the behavior I am expecting to see is that any length of string should reduce the results displayed in the table. For example, I have 10 animals and 6 contain the letter "A", so when I type "A" I expect to see those four animals. Instead, upon even typing a single letter, all of the results are filtered away and the table is empty. – Aidan Baker Commented Apr 13, 2020 at 12:34
• @Lemmy essentially, yes. But, I would like to know fundamentally why my code is not working as expected. – Aidan Baker Commented Apr 13, 2020 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You just forgot a return statement in the transform:

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