Angular 4 checkbox pipe filter

Question

Hello I am trying to make a custom pipe filter which filters the data when checkbox is checked. I have a list of job locations which I want to filter when the certain job location is checked. I am providing the code which is related to the issue/problem.

Pipe code -

@Pipe({
  name: 'checkcity'
})
export class CheckcityPipe implements PipeTransform {

  transform(check: any, checked: any): any {
    let [loc] = checked;
    console.log('checked',checked);
    return checked
            ? check.filter(city => {return city.location }) 
            : check;
  }

}

Input Checkbox -

<input type="checkbox" value="" [(ngModel)]="checked" name="checked"> Bangalore

Data to filter -

<div *ngFor="let joblist of jobList | checkcity: checked">
    {{joblist.location}}
</div>

What does return city.location return? Is it supposed to filter all elements where city.location contains a value? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 14, 2017 at 8:01
@GünterZöchbauer, hi I was experimenting, so you can remove that/ignore that, also I am not getting error, that is the problem — Akshay
– Akshay, Commented Sep 14, 2017 at 8:58

Niladri · Accepted Answer · 2017-09-14 09:31:00Z

1

You should rename local var as joblist and the source as jobLists they should not be same. Can you try with the below code

@Pipe({
  name: 'checkcity'
})
export class CheckcityPipe implements PipeTransform {

  transform(check: any, checked: any): any {
    //let [loc] = checked;
    console.log('checked',checked);
    return checked
            ? check.filter(city =>  city.location == checked) 
            : check;
  }

}

<input type="checkbox" value="Bangalore" [(ngModel)]="checked" name="city"> Bangalore

<div *ngFor="let joblist of jobLists | checkcity: checked">
    {{joblist.location}}
</div>

edited Sep 14, 2017 at 9:31

answered Sep 14, 2017 at 8:17

Niladri

5,9922 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Akshay Over a year ago

Hello, I tried this, its not working and not giving me any error, but is saying that checklist undefined. I have put the list and checkbox filter in different component, will it affect.

Niladri Over a year ago

@Akshay what is checklist? you have to import the pipe class in your list component class

Niladri Over a year ago

it is better if you can put the code in separate files in the question for better understanding of others

Akshay Over a year ago

sorry, it is checked undefined, I have imported the pipe class wherever required, else it would have given me an error. But there is no error coming.

Niladri Over a year ago

@Akshay have you declared a property as checked in your component class? updated the name of checkbox.

|

Collectives™ on Stack Overflow

Angular 4 checkbox pipe filter

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related