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.
Faly :
Try this:\n\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { JobsService } from '../services/jobs.service';\n\n@Pipe({\n name: 'selectbox'\n})\nexport class SelectboxPipe implements PipeTransform {\n\n transform(items: any, sel?: any): any {\n return sel ? items.filter(sal => sal.position === sel) : items;\n }\n}\n<select class=\"form-control\" [(ngModel)]=\"sel\" name=\"sel\">\n <option *ngFor=\"let positionOpt of positionSelect\" [ngValue]=\"positionOpt.position\">{{positionOpt.name}}</option>\n</select>\n\n<ul class=\"jobs-list\">\n <li *ngFor=\"let joblists of jobList | selectbox: sel\">\n {{joblists.position}}\n </li>\n</ul>\n",
2017-09-15T06:28:33