How to apply filters to *ngFor?
Tags: angular, typescript, javascript, frontend
Published: 2021-02-17 00:50:56


<section data-field="subtitle" class="p-summary">
Angular Basics
</section>
<section data-field="body" class="e-content">
<section name="c486" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="9ebd" id="9ebd" class="graf graf--figure graf-after--h3"><img class="graf-image" data-image-id="0*q-zySr7MJohX4HrD.jpg" data-width="491" data-height="550" src="https://cdn-images-1.medium.com/max/800/0*q-zySr7MJohX4HrD.jpg"></figure><p name="3094" id="3094" class="graf graf--p graf-after--figure">As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.</p><p name="5ace" id="5ace" class="graf graf--p graf-after--p">Recently, I was looking for the best way to optimize my angular code. I have gone through a lot of articles and as we know it is limitless. Then I thought of consolidating the checklist for writing cleaner code for Angular which helped me and might help others too.</p><p name="a633" id="a633" class="graf graf--p graf-after--p">These small articles not only help you to write a better TypeScript or JavaScript Code but also clear the concepts of front-end technologies. This will help you to build your strong base and can help you in the upcoming frontend interviews.</p><p name="4060" id="4060" class="graf graf--p graf-after--p">One of the most basic topics in any programming is displaying data from services to the HTML. We do use various techniques to support this. One of the widely used directives for this *ngFor which works like for loop and iterate and display content as needed. What if we want to apply some filter while iterating the data. Letâ€™s see one of the ways to achieve this.</p><p name="3f14" id="3f14" class="graf graf--p graf-after--p">When we have much bigger data and want to filter multiple items in the HTMLÂ , It will be like lot of conditions in HTML so it is better to create a pipe which can do a filtering and give us the data.</p><p name="6804" id="6804" class="graf graf--p graf-after--p">Letâ€™s check the steps to create the filter pipe.</p><p name="35a3" id="35a3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">1. Component</strong></p><pre name="e34c" id="e34c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">filterargs = {title: &#39;hello&#39;};<br>data= [{title: &#39;test abc&#39;}, {title: &#39;test cde&#39;}, {title: &#39;foo bar&#39;}];</code></pre><p name="94ca" id="94ca" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">2. Template</strong></p><p name="b682" id="b682" class="graf graf--p graf-after--p">In your template, you can pass string, number, or object to your pipe to use to filter on:</p><pre name="8502" id="8502" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;li *ngFor=&quot;let data of data| filter:filterargs&quot;&gt;</code></pre><p name="defb" id="defb" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">3. Pipe</strong></p><pre name="cf36" id="cf36" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Pipe, PipeTransform } from &#39;@angular/core&#39;;</code></pre><pre name="768a" id="768a" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">@Pipe({<br>    name: &#39;myfilter&#39;,<br>    pure: false<br>})<br>export class FilterPipe implements PipeTransform {<br>    transform(items: any[], filter: Object): any {<br>        if (!items || !filter) {<br>            return items;<br>        }<br>        // filter items array, items which match and return true will be<br>        // kept, false will be filtered out<br>        return items.filter(item =&gt; item.title.indexOf(filter.title) !== -1);<br>    }<br>}</code></pre><p name="eea3" id="eea3" class="graf graf--p graf-after--pre">Remember to register your pipe in <code class="markup--code markup--p-code">app.module.ts</code>; you no longer need to register the pipes in your <code class="markup--code markup--p-code">@Component</code></p><pre name="8a0f" id="8a0f" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FilterPipe } from &#39;./shared/pipes/my-filter.pipe&#39;;</code></pre><pre name="6ba0" id="6ba0" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">@NgModule({<br>    imports: [<br>        ..<br>    ],<br>    declarations: [<br>        FilterPipe,<br>    ],<br>    providers: [<br>        ..<br>    ],<br>    bootstrap: [AppComponent]<br>})<br>export class AppModule { }</code></pre><p name="bae4" id="bae4" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">References:</strong></p><div name="7c0c" id="7c0c" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor" data-href="https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor"><strong class="markup--strong markup--mixtapeEmbed-strong">How to apply filters to *ngFor?</strong><br><em class="markup--em markup--mixtapeEmbed-em">Apparently, Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter resultsâ€¦</em>stackoverflow.com</a><a href="https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="d0561f85ce1c00bfab3574510c8220f1" data-thumbnail-img-id="0*15q_NE7goGB142tq" style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*15q_NE7goGB142tq);"></a></div></article></body></html>