Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Grid page with the button filters.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment