DEV Community

Cover image for How to access filtered elements in angular pipe
Codever profile image Adrian Matei
Adrian Matei for Codever

Posted on • Edited on • 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"
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

See it in action at www.codever.land:

filter-bookmarks-results-expanding


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.

Top comments (0)

Read next

renukapatil profile image

1. Core Angular Concepts: Components, Templates, Data Binding, and Directives

Renuka Patil -

patrick_61cbc6392b72286f6 profile image

Axios vs Fetch: Which is Best for HTTP Requests?

Patrick -

itamartati profile image

Angular’s Biggest Misconception: "It’s Not Worth Learning Due to Fewer Jobs"

Itamar Tati -

elidvenega profile image

Svelte Counter I made to understand runes

Elid -