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
*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"> <app-bookmark-list-element [showMoreText] = "filteredBookmarks.length === 1 || bookmarks.length === 1" [bookmark]="bookmark" [userData$]="userData$" [queryText]="queryText" [filterText]="filterText" [isSearchResultsPage]="isSearchResultsPage" > </app-bookmark-list-element> </div>
See it in action at www.codever.dev:
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 ⭐🙏