How to filter the listing rows using checkbox values in angular?

Question

html(I have Filter button with options in order to the listing rows. )

 <button mat-raised-button [matMenuTriggerFor]="filter">Filter</button>
    <mat-menu #filter="matMenu" yPosition="below" xPosition="before">
        <ng-template matMenuContent>
                <div class="row">
                    <div class="col-6">
                        <section class="example-section" (click)="$event.stopPropagation();">
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Active</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Expired</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Grace</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Trial</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Invited</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >InActive</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >A-Z</mat-checkbox>
                            <mat-checkbox (click)=" checkBoxFilter($event.target.value)"class="example-margin" >Expiry Date</mat-checkbox>
                        </section>
                    </div>

                </div>
        </ng-template>
    </mat-menu>

component.ts(how to filter the value using this method??)

checkBoxFilter(event){

 }

Pujan Shah · Accepted Answer · 2019-11-06 07:14:46Z

You can achieve it like below.

Template Code

    <button mat-raised-button [matMenuTriggerFor]="filter">Filter</button>
    <mat-menu #filter="matMenu" yPosition="below" xPosition="before">
        <ng-template matMenuContent>
            <div class="row">
                <div class="col-6">
                    <section class="example-section">
                        <mat-checkbox *ngFor="let opt of options" value="{{opt.value}}" [(ngModel)]="opt.checked"
                            (change)="checkBoxFilter()" class="example-margin">{{ opt.name }}</mat-checkbox>
                    </section>
                </div>

            </div>
        </ng-template>
    </mat-menu>

In the component we are having the selected values in selectedOpt variable based on that we can apply the filter.

    selectedOpt: string[];
    options = [
        { name: "Active", value: "active", checked: false },
        { name: "Expired", value: "expired", checked: false }
      ];
      checkBoxFilter() {
        this.selectedOpt = this.options.filter(o => o.checked).map(o => o.value);
        console.log(this.selectedOpt);
      }

Collectives™ on Stack Overflow

How to filter the listing rows using checkbox values in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related