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>
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>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