Filter by pills/buttons instead of using a select - angular
Bind a click event (click)="filteredLocation = entry.location"
to the button
Try like this:
<div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
<button (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
</div>
Working Demo
The crux of this is just assign the value of the button/switch to your filteredLocation
variable like below
<button (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
Updated Demo
Hope this helps :)
Easier to just have a click handler:
<div>
<button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique" (click)="filter(entry)">{{entry.location}}</button>
</div>
filter(entry) {
this.filteredLocation = entry.location;
}
Demo: https://stackblitz.com/edit/timeline-angular-7-z2e6zh?file=src/app/timeline/timeline.component.ts