In this section, we're going to implement some filter functionality for our task list. In order to control the active filter criteria, we are first building a toggle button list component. Let's go ahead and create a new component using the Angular CLI:
ng generate component --spec false -ve none ui/toggle
After running the Angular CLI generator command on your console, let's edit the HTML template of the newly created component in src/app/ui/toggle/toggle.component.html:
<button class="toggle-button" *ngFor="let button of buttonList" [class.active]="button === activeButton" (click)="activate(button)">{{button}}</button>
Nothing special here, really! We repeat a button by iterating over an instance field called buttonList ...