title: Creating a Filter Pipe in Angular 8
body: <p>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. </p>
  
  <p>AnimalsComponent.ts</p>
  
  <pre><code>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[])=&gt;{  
              console.log(data);  
              this.animals = data;  
          })  
      }
  }
  </code></pre>
  
  <p>Animals Filter Pipe</p>
  
  <pre><code>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());
      })
    }
  
  }
  </code></pre>
  
  <p>Animals.html</p>
  
  <pre><code>&lt;div style="padding: 13px;"&gt;
    &lt;form id = "animalFilter"&gt;
      &lt;label&gt;Filter by Animal:&lt;/label&gt;
      &lt;input type="text" [(ngModel)]= "term" [ngModelOptions]="{standalone: true}"/&gt;
    &lt;/form&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;Hemisphere&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Animal&lt;/th&gt;
              &lt;th&gt;Seasonality&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Time&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
            &lt;/tr&gt;
          &lt;tr *ngFor="let animal of animals | animalFilter:term"&gt;
            &lt;td align="center"&gt;{{ animal.Hemisphere }}&lt;/td&gt;
            &lt;td align="center"&gt;{{ animal.Type }}&lt;/td&gt;
            &lt;td align="center" &gt;{{ animal.Animal }}&lt;/td&gt;
            &lt;td align="center"&gt;{{ animal.Seasonality }}&lt;/td&gt; 
            &lt;td align="center"&gt;{{ animal.Location }}&lt;/td&gt;
            &lt;td align="center"&gt;{{ animal.Time }}&lt;/td&gt;
            &lt;td align="center" *ngIf="animal.Price; else noPrice"&gt;{{ animal.Price }} Bells&lt;/td&gt;
            &lt;ng-template #noPrice&gt; 
              &lt;td align="center"&gt;TBD&lt;/td&gt;
            &lt;/ng-template&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>