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