Filter by checkbox in angular 5

Question

I am able to implement the filter on input field with the pipe. But I am not able to do so with checkbox filter.

Below is my code for input filter.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(users: any, searchTerm: any): any {
        // check if search term is undefined
        if (searchTerm === undefined) {
            return users;
        }
        // return updated users array
        return users.filter(function(user) {
            return user.name.toLowerCase().includes(searchTerm.toLowerCase());
        });
    }
}

UserComponent.html

<input type="text" [(ngModel)]="searchTerm">

<table>
    <tr *ngFor="let user of users | filter: searchTerm">
        <td>{{user.name}}</td>
        <td>{{user.type}}</td>
    </tr>
</table>

Now for type I want to filter on checkbox select.

<tr>
    <td *ngFor="let role of roles">
        <label>{{role.type}}</label>
        <input type="checkbox">
    </td>
</tr>

In input field i can get the value using [(ngModel)] but in checkbox, I am not able to do so. Please let me know how could I achieve using checkbox select. Thank you

How is your selection filter supposed to work? What do you expect to happen if one clicks one of those checkboxes? — , Mar 14 '18 at 21:17
@DiabolicWords I have list of users with name and type. I would like to filter the list with `student` or `admin` on checkbox select. There are 2 different checkbox for `student` and `admin` — surazzarus, Mar 14 '18 at 21:20

SubbU · Answer 1 · 2018-03-15T13:45:46.873

Component code:

public roleList = {studentRole:false,adminRole:false,staffRole:false};

HTML code:

<tr>
    <td *ngFor="let user of userList | roleFilter:roleList">
        {{user.name}} - {{user.roleType}}
    </td>
</tr>

<label>Student</label>
<input [(ngModel)] = "roleList.studentRole" type="checkbox">

<label>Admin</label>
<input [(ngModel)] = "roleList.adminRole" type="checkbox">

<label>Staff</label>
<input [(ngModel)] = "roleList.staffRole" type="checkbox">

Pipe code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'roleFilter'
})
export class RoleFilter implements PipeTransform {

    transform(userList: any,roleList:any): any {
        if(!roleList.studentRole && !roleList.adminRole && !roleList.staffRole){
            return userList;
        }

        return userList.filter(user => 
                                (roleList.studentRole && user.roleType == "student") 
                                || (roleList.adminRole && user.roleType == "admin")
                                || (roleList.staffRole && user.roleType == "staff"))
    }
}

I think you misunderstood it. Actually I have list of 1000 users with different roles `student`, `admin` and `staff`. Now I would like to filter the list according to the role from checkbox select. — surazzarus, Mar 15 '18 at 08:08
Got it. A select box would be helpful in this case if the number of roles is dynamic or too high instead of checkboxes. Anyway, I have updated my code.. — SubbU, Mar 15 '18 at 13:47

DeborahK · Answer 2 · 2018-03-14T21:47:50.473

0

Yes, you can use ngModel like this:

<input type="checkbox" name="admin" id="admin" [(ngModel)]='isAdmin'>
<input type="checkbox" name="student" id="student" [(ngModel)]='isStudent'>

And I have a blog post on filtering here: https://blogs.msmvps.com/deborahk/filtering-in-angular/

It shows how to filter with code instead of with a pipe so you can more easily filter on checkbox values.

edited Mar 14 '18 at 21:47

answered Mar 14 '18 at 21:21

DeborahK

57,520
12
104
129

Can you please show me how this [(ngModel)] in checkbox works for all different checkboxes. I read your blog but didn'T get it completely. – surazzarus Mar 14 '18 at 21:47
Not sure I understand what you mean by "all different"? But I added a second checkbox above. – DeborahK Mar 14 '18 at 21:48

score 0 · Answer 3 · 2018-03-15T08:46:18.397

First of all, you shouldn't use checkboxes when it comes to state switching. Always use radio buttons in this case.

Put this code in your HTML-template

<label>
  <input type="radio" name="role-group" id="admin" value="admin" [checked]="searchTerm==='admin'" [(ngModel)]="searchTerm">Admin
</label>
<label>
  <input type="radio" name="role-group" id="student" value="student" [checked]="searchTerm==='student'" [(ngModel)]="searchTerm">Student
</label>
<label>
  <input type="radio" name="role-group" id="staff" value="staff" [checked]="searchTerm==='staff'" [(ngModel)]="searchTerm">Staff
</label>

And make sure that searchTerm is a member of your typescript file. e.g.:

private searchTerm: string = 'search';

That should work. If you now click one of those radio buttons searchTerm is set and Angular will filter using your pipe. Moreover, if you enter 'admin', 'student' or 'staff' manually, the corresponding radio button will get activated.

@DiabollicWords I wanted to do it with checkbox because I aslo have to filter on two or all the roles and not just one role. — surazzarus, Mar 15 '18 at 10:05
Well, that makes it more complicated. I could show you how to do the same thing I did with radio buttons using checkboxes then. But that won't help you because your pipe is, in its current state, not able to handle 3 different search parameters. I'd suggest that you first try to adjust your pipe. So that you can enter e.g. "admin | staff" into your input field and it filters all users with these roles. If you've achieved that, come back to this post and I'll show you how to enter these values via checkboxes. — , Mar 15 '18 at 11:45

Filter by checkbox in angular 5

3 Answers3

Linked