CODEWITHSUNDEEP
templatesangular
user776686
user776686

Reputation: 8655

Referencing filtered result of piped items in template

In a custom dropdown UI component I am showing items used in an *ngFor loop using the typical let item in items; let ix = index The index is then used to provide moving around the list with arrow up/down keys. I keep track of the last highlighted item and behave accordingly.

Problem arises when I add a search input field that provides a search term value to a pipe which then filters out non-matching items, as in:

let item in items | searchPipe: currentTerm; let ix = index

That's when the indices become messed up against what user sees. I was wondering if this could be achieved in template syntax at all to get the current array of piped items and have indices applied over them.

Or should I rather call the pipe programmatically and create a filtered copy of items for each term, as in:

let item in pipedItems; let ix = index

and

this.pipedItems = SearchPipe.transform(items, currentTerm);

Could the same be achieved with a custom structural directive, like *pipedFor? Would it have any advantage (apart from its re-usability) over the former approach?

Upvotes: 1

Views: 55

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657546

I think this is the way to go

this.pipedItems = new SearchPipe().transform(items, currentTerm);

There is currently no way to get the piped result inside the template. As far as I remember it was discussed a while ago if this should be added but I don't think anything happened yet.

Upvotes: 1

Related Questions