DEV Community

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

Posted on β€’ Edited on β€’ Originally published at codever.dev

3

How to access filtered elements in angular pipe

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.

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay