Pipe to allow multiple filter values simultaneously - Angular

Question

Buttons are generated using *ngFor bringing back as many different types of values available to filter by. I'm filtering on a key of 'location', therefore if there are locations of 'west' and 'england' then two buttons of 'west' and 'england' are available to filter by.

What I want to be able to do is select more than one filter. If I click 'england' all the results for 'england' come back, then if I click 'west' then 'west' comes back as well as 'england' still being "active". Currently, I can only click one filter at a time.

I think I need to assign an active class to my button then this will push an array of whats active to send to my pipe to do the filtering... ?

My filter Button

  <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
    <button value="All" class="m-2 btn btn-primary" type="button">All</button>
    <button [class.active]="selectedIndex === i" (click)="filteredLocation = entry.location" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
  </div>

single filter on results

<div class="timeline">
  <my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location'" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
</div>

I have created a stackBlitz of what I've got - try clicking on a filter you will see only one filter can be applied at one time. https://stackblitz.com/edit/timeline-angular-7-nve3zw

Any help here would be awesome. Thanks

You shouldn't be using a pipe here since you are expecting the pipe to reference a property value by indexing (See here) — nash11
– nash11, Commented Sep 26, 2019 at 13:20

jitender · Accepted Answer · 2019-09-26 12:11:05Z

1

There can be multiple ways to do that one would be to attach some property to determine if location is active for example isLocationActive

Then toggle this flag as per your need and to apply active class also you don't need filter pipe in that case

So your html will look like

<div class="form-group row">
  <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
        <button value="All" class="m-2 btn btn-primary" (click)="activeAllEntries()" type="button">All</button>
        <button [class.active]="entry.isLocationActive" (click)="entry.isLocationActive = !entry.isLocationActive" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
      </div>
</div>

<div class="timeline">
  <ng-container *ngFor="let entry of timeLine">
<my-timeline-entry *ngIf="entry.isLocationActive" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
  </ng-container>

</div>

TS function

   activeAllEntries() {
      this.timeLine.forEach(t=> t.isLocationActive=!t.isLocationActive)
   }

working Demo

answered Sep 26, 2019 at 12:11

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Rudge Over a year ago

Great, I will take a look at the code - pretty new to Angular so building up as much as possible. Thanks

jitender Over a year ago

@TomRudge glad to help you

Tom Rudge Over a year ago

I've found a small bug actually, the filter will only bring back one record e.g. there are two east but only one returns

jitender Over a year ago

Sry out of office can check tomorrow morning :)

Collectives™ on Stack Overflow

Pipe to allow multiple filter values simultaneously - Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related