In HTML


<select class="form-control" [(ngModel)]="selectedFilter" id="selectedFilter" name="selectedFilter" (ngModelChange)="onChange($event)">
<option value=""></option>
<option *ngFor="let filter of allFilters " [ngValue]="filter">
{{ filter.filterName }}
</option>

</select>

<div class="row" *ngFor="let song of ps | searchFilter : txtSearch">

<app-oppertunity-song [ProjectSonglist]="song"></app-oppertunity-song>
</div>

In .ts file



import { ProjectSong } from "./project-song.interface";
import { Pipe, PipeTransform } from '@angular/core';
import { SearchFilterPipe } from '../../../pipes/search-filter.pipe';



ngOnInit() {

//calling web service and get data

this.opportunitySongs.getOpportunitySongsCounter().subscribe((res) => {

//Assign result into interface
this.ps = res;
});



}


onChange(selectedFilterText) {
this.ps = new SearchFilterPipe().transform(this.projectSongslist,selectedFilterText);



}


SearchFilterPipe

import { Pipe, PipeTransform } from '@angular/core';
import { ProjectSong } from "app/opportunity_listen/listing/songs-filter/project-song.interface";
@Pipe({
name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {

transform(ProjectWithSongs: ProjectSong[], selectedFilter: string): any {

if (selectedFilter == undefined) return ProjectWithSongs;
return ProjectWithSongs.filter((item: any) => {
for (let prop in item) {

if (selectedFilter == "r0" && (item["rating"] == "0")) {
return true;
}
if (selectedFilter == "r2" && (parseInt(item["rating"]) <= 2)) {
return true;
}
}
return false;
});
}

}