Angular 4 Filtre Geliştirme 27.12.2017

Malesef Angular 4 'te Angularjs 'deki filter ve orderby bulunmamakta , performansı düşürüyor diye çıkartmışlar ama bence güzeldi neyse Angular 4 'te nasıl arama filtresi yapılır bunu göstereceğim,

1.) Öncelikle bir pipe oluşturuyoruz, ben bunu angular-cli kullanarak yapıyorum, component,service vs. komut satırından yapılması daha pratik ve doğru kodlarla oluşturuluyor.

komut satırına : ng g pipe pipes/searchtext yazıp "searchtext" adında yeni bir pipe oluşturuyoruz.

Arama Pipe 'ımızı şu şekilde oluşturuyoruz:

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

@Pipe({
name: 'searchtext'
})
export class SearchtextPipe implements PipeTransform {

transform(items: any, term: any): any {
if (term === undefined) return items;

return items.filter(function(item) {
for(const property in item){
if (item[property] === null){
continue;
}
if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
return true;
}
}
return false;
});
}

}

2.) view kısmında bu pipe ı kullanarak istediğimiz input modelini filtreleme yapcağımız kısıma yazıyoruz. Angularjs'deki custom filtre kullanımı gibi.

<div class="form-group">
<label>Search</label>
<input type="text" name="" id="" class="form-control" [(ngModel)]="searchTitleInput">
</div>

<ul>
<li *ngFor="let item of posts | searchtext:searchTitleInput">{{item.title}}</li>
</ul>

Hepsi bu kadar , sevgiler.