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. In the following example the bookmarkFilter filters the list of bookmarks based on some text search, and I need to check the filtered results contain only one element [showMoreText] = "filteredBookmarks.length === 1 "(to display the fool 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:

Copy-to-clipboard-demo


The source code for Codever is available on Github


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

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

Dynamically expand angular material panel when condition met

Dynamically expand angular material panel when condition met code snippet Continue reading

Copy to clipboard with angular material

Published on October 12, 2022

Default value for jax-rs query parameter

Published on August 29, 2022