Access elements filtered by pipe in angular html template

To access the filtered results of the pipe just define it as a variable via the as keyword

*ngFor="let bookmark of bookmarks | bookmarkFilter: filterText as filteredBookmarks"

In the full example the bookmarkFilter pipe filters the list of bookmarks based on some text search. Further I need to check whether the filtered results contain only one element [showMoreText] = "filteredBookmarks.length === 1 ", to then display the full content of the bookmark:

<div class="mt-3" *ngFor="let bookmark of bookmarks | bookmarkFilter: filterText as filteredBookmarks">
        [showMoreText] = "filteredBookmarks.length === 1 || bookmarks.length === 1"

See it in action at


The source code for Codever is available on Github

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Use test.each in jest to avoid repetitive tests

This blog post makes a case for using jest test.each wherever possible, by refactoring an existing test, thus making the code more concise and maintainable and reduce code duplication Continue reading