In Angular2, I have created a custom pipe to filter an array based on type ID and year arrays. Here is how it is defined:
@Pipe({name: 'highlightedWorksFilter', pure: false})
export class HighlightedWorksFilterPipe implements PipeTransform {
transform(works: IHighlightedWork[], activityTypeIds: any[], activityYears: any[]){
if (works && works.length) {
return works.filter(work => {
if(activityTypeIds.findIndex(i => i.id === work.activityTypeId && i.checked) === -1) {
return false;
}
if (activityYears.findIndex(i => i.year === work.activityYear && i.checked) === -1) {
return false;
}
return true;
});
} else {
return works;
}
}
}
It is used in the calling component like this:
<div>FILTERED COUNT / {{highlightedWorks.length}}</div>
<div *ngFor="let work of highlightedWorks | highlightedWorksFilter: myActivityTypeIds:myActivityYears">
{{work.Title}}
</div>
The filter works perfectly with the checkbox list arrays for type and year. My question is, how can I display the FILTERED COUNT outside of the ngFor loop to show the number of results after the pipes are applied?