CODEWITHSUNDEEP
javascriptangulartypescriptfilterpipe
Tom Rudge
Tom Rudge

Reputation: 3272

Make all filter options 'active' on initialisation - Angular

https://stackblitz.com/edit/timeline-angular-7-wbff3f

The above stackblitz will demo a few pipe filters. If you click on locations of "North, South or East", it will populate the *ngFor loop - these filters can be selected on/off and use a "multifilter pipe". By default I want all these filter buttons "active" or "on" to show the complete populated list to begin with, allowing you to then click the filters off. Otherwise, the list if blank on first load!

.html file

<button [class.active]="entry.isLocationActive" (click)="toggle(entry.location); entry.isLocationActive = !entry.isLocationActive" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>


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

.ts file

filteredLocations: string[] = [];

toggle(location) {
    let indexLocation = this.filteredLocations.indexOf(location);
    if (indexLocation >= 0) {
      this.filteredLocations = this.filteredLocations.filter((i) => i !== location);
    } else {
      this.filteredLocations.push(location);
    }
}

I've played around with pre-populating the filteredLocations object with all the values, so it starts off with them all therefore active.

I managed to get the 'active' class to be active on first load but that did not carry through to the pipe filter. I'm sure its not a big change just can't see it, any help would be appreciated greatly!

Upvotes: 1

Views: 195

Answers (1)

Tom Rudge
Tom Rudge

Reputation: 3272

filteredLocations = this.timeLine.map(a => a.location);

Adding this to the .ts file and replacing the empty filteredLocations: string[] = [];

I wasn't far off initially in the end. Hope it helps others.

Upvotes: 1

Related Questions