CODEWITHSUNDEEP
htmlangular
kuki
kuki

Reputation: 65

Angular2 , using two inputs to filter data

I having trouble on this small project. I want to make on my html two inputs and they have to filter some data from database. I manged to make one filter (it works) but I dont know how to make second filter. (Im sorry for not using english language in my files and I hope it doesnt bother you). Here is what i got :

html file

<div class="container">
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Broj Kreveta" [(ngModel)]="broj_kreveta">
            <input type="text" class="form-control" placeholder="Broj Kvadrata" [(ngModel)]="broj_kvadrata">
        </div>
    </form>
    <div class="col-lg-12">
        <br/>Rooms<br/> <br/>
        <div *ngFor="#soba of sobe | SearchPipe:broj_kreveta">
            ID room: {{soba.id}}
            <br/>
            Category: {{soba.kategorija}}
            <br/>
            Room number: {{soba.broj_sobe}}
            <br/>
            Number of beds: {{soba.broj_kreveta}}
            <br/>
            sqm: {{soba.broj_kvadrata}}
            <br/><br/>
        </div>
    </div>
</div>

search.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'SearchPipe'
})

export class SearchPipe {
    transform (value, [queryString]) {
        if (value == null) {
            return null;
        }
        console.log('transform');
        return value.filter(item=>item.broj_kreveta.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
    }
}

Upvotes: 0

Views: 256

Answers (1)

null canvas
null canvas

Reputation: 10603

You can have booth parameters in your pipe:

{{ myData | myPipe: arg1:arg2:arg3... }}

and the pipe definition:

export class MyPipe implements PipeTransform {    
    transform(value:any, arg1:any, arg2:any, arg3:any):any {
    }

Upvotes: 1

Related Questions