Grid page with the button filters.

grid-page.component.html

<p>
  Press a button to visually filter results
</p>
<form>
  <div class="row">
    <div class="float-left pr-1"><button type="button" class="btn btn-md"
      (click)="resetFilters()">All</button></div>
    <div class="float-left pr-1"><button type="button" class="btn btn-md btn-info"
      (click)="toggleFilter('blue')">Blue</button></div>
    <div class="float-left pr-1"><button type="button" class="btn btn-md btn-success"
      (click)="toggleFilter('green')">Green</button></div>
    <div class="float-left pr-1"><button type="button" class="btn btn-md btn-warning"
      (click)="toggleFilter('yellow')">Yellow</button></div>
    <div class="float-left pr-1"><button type="button" class="btn btn-md btn-danger"
      (click)="toggleFilter('red')">Red</button></div>
  </div>
  <div class="form-check mt-3">
    <input class="form-check-input" type="checkbox" id="enableAnimation" name="enableAnimation" [(ngModel)]="animate">
    <label class="form-check-label" for="enableAnimation">
      Enable animation
    </label>
  </div>
</form>

<app-data-grid
  [data]="filteredData"
  [animate]="animate"></app-data-grid>