Select Option Filter in Angular 4 with pipe

Question

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.

Answer 1

Try this:

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

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

    transform(items: any, sel?: any): any {
        return sel ? items.filter(sal => sal.position === sel) : items;
    }
}
<select class="form-control" [(ngModel)]="sel" name="sel">
    <option *ngFor="let positionOpt of positionSelect" [ngValue]="positionOpt.position">{{positionOpt.name}}</option>
</select>

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

Answer 2

Try this : I got sel value which object you selected in dropdown list. that values is show in selectbox.pipe.ts console.log

app.component.html

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

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

app.component.ts

export class AppComponent {
    private sel: any;
    private jobList: any[];
    private positionSelect: any[] = [{
        name: "Social Media Manager",
        position: "Social Media Manager"
    },
    {
        name: "Product Manager",
        position: "Product Manager"
    }]
}

selectbox.pipe.ts

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

@Pipe({
    name: 'selectbox'
})

export class SelectboxPipe implements PipeTransform {
    transform(opt: any, sel?: any): any {
        console.log('sel', sel);
        return (opt || opt === '0') ? opt.filter(sal => { return sal.position == sel }) : opt;
    }
}

app.module.ts

import { SelectboxPipe } from './selectbox.pipe';

@NgModule({
    declarations: [
        SelectboxPipe
    ],
    exports: [   
        SelectboxPipe
    ]
})