Angular

Angularda Pipe ile filtreleme yapmak

1)  ng g p Filter ile pipemızı oluşturuyoruz. Bu 2 adet dosya oluşturucak birisi test için kullanılan diğeri filter sorgusunu yapacagımız pipe.ts dosyası ve update olan dosya ise appmodule de declarations kısmına ekleme yapıyor.

2) appmodule de Modullerden "FormsModule" imports kısmınıa ekli olması gerekmektedir.

3) ilgili componentin html de input için

[(ngModel)]="filterText" two-way binding olması için ngmodel ekliyoruz ve bunu iligi componentin ts dosyasında karşılamak için filterText:string=""; şeklinde tanımlıyoruz

4) pipe içerisindeki kodlar aşağıdaki gibidir.

import { Pipe, PipeTransform } from '@angular/core';
import {Movie} from "../models/movie";
import {filter} from "rxjs";

@Pipe({
  name: 'movieFilter'
})
export class MovieFilterPipe implements PipeTransform {

  transform(movies:Movie[],filterText:string): Movie[] {
    filterText=filterText.toLowerCase();

    return filterText? movies.filter((m:Movie)=>m.title.toLowerCase().indexOf(filterText)!==-1 ||
      m.description.toLowerCase().indexOf(filterText)!==-1):movies;

  }

}

 

burada modelimiz olan Movie ekledik. bize filtertex den gelen veri ile movies den gelen gelen veriyi alarak Movie[] olarak geri döndürüyoruz. Yine filterText içerisinde yazılanları küçük harfe çevirerek, model tarafındaki verileri de küçük harfe çevirerek aram yaptırıyoruz. Aramada karşımız çıkanları gösteriyoruz. eğer hiç arama yoksa direk movies hepsine gösteriyoruz

Angularda Pipe ile filtreleme yapmak