Adrian Matei for Codever

Posted on Nov 28, 2022 • Edited on Jan 9, 2023 • Originally published at codever.dev

How to access filtered elements in angular pipe

#angular #html #codever #snippets

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">
  <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.land:

The source code for Codever is available on Github

Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →