Select Option Filter in Angular 4 with pipe

Viewed 13261

I am trying to create a pipe with the selectbox dropdown for filtering the list in json data. I have created a pipe with selectbox pipe. I am not able to get my filter work in pipe. Please help. Here is my code -

Select Box -

<select class="form-control" [(ngModel)]="sel" name="sel">
   <option selected disabled>Select</option>
    <option *ngFor="let positionOpt of positionSelect" [value] = "sel">{{positionOpt.name}}</option>
</select>

Data For SelectBox Options Field -

positionSelect:any[] = [
{
  name: "Social Media Manager",
  position: "Social Media Manager"
},
{
  name: "Product Manager",
  position: "Product Manager"
}
]

Pipe for selectbox -

import { Pipe, PipeTransform } from '@angular/core';
import { JobsService } from '../services/jobs.service';

@Pipe({
  name: 'selectbox'
})
export class SelectboxPipe implements PipeTransform {

  transform(opt: any, sel?: any): any {
    return (opt || opt === '0')
        ? opt.filter(sal => { return sal.position == sel})
        : opt;
}

}

Job List Data -

<ul class="jobs-list">
    <li *ngFor="let joblists of jobList | selectbox: sel">
         {{joblists.position}}
    </li>
</ul>

This jobList data in Json is coming from a service. Should I use *ngFor in select option field from jobList or it is fine coming from different json data. Please help with selectbox filter.

2 Answers
Related