Argthtjtr

I've added to form inputs that will filter users by age ranges. Created pipe for that. Now I am trying to implement that in the working example where were used other pipe for filtering results based on other forms. How can I use age range pipe in this working example and make those 2 pipes work together? Here is the code:

Age range pipe

     transform(value: any, args?: any): any

 { if(!args) return value;

 return value.filter( item => item.age > args[0] && item => item.age < args[1])

     );

     }

Where args[0] is min value and args[1] max value.

Pipe of working search example

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'filter',

})

export class FilterPipe implements PipeTransform {

    transform(items: any, value: string, prop: string): any {

        if (!items) return ;

        if (!value) return items;



        return items.filter(singleItem =>

            singleItem[prop].toLowerCase().includes(value.toLowerCase())

        );



    }

}

TypeScript of working example

form: FormGroup;



  @Output() autoSearch: EventEmitter<string> = new EventEmitter<string>();

  @Output() groupFilters: EventEmitter<any>  = new EventEmitter<any>();

  searchText: string = '';

  constructor(private fb: FormBuilder,

              private userService: UserService) {}



  ngOnInit(): void {

    this.buildForm();

  }



  buildForm(): void {

    this.form = this.fb.group({

      name: new FormControl(''),

      prefix: new FormControl(''),

      position: new FormControl(''),

      gender: new FormControl(''),

      agefrom: new FormControl(''),

      ageto: new FormControl('')

    });

  }



  search(filters: any): void {

    Object.keys(filters).forEach(key => filters[key] === '' ? delete filters[key] : key);

    this.groupFilters.emit(filters);

  }



}

HTML

<form novalidate

      [formGroup]="form">



  <h3>Group Filter</h3>

  <div class="row">

    <div class="col-md-3">

  <input type="text" 

  formControlName="name"

         class="form-control"

         placeholder="name"

         #searchName

        />

    </div>

        <div class="col-md-3">

  <input type="text" 

  formControlName="agefrom"

         class="form-control"

         placeholder="age from"

         #searchName

        />

    </div>

        <div class="col-md-3">

  <input type="text" 

  formControlName="nageto"

         class="form-control"

         placeholder="age to"

         #searchName

        />

    </div>

    <div class="col-md-3 col-sm-3">

      <select class="form-control"

              formControlName="prefix">

        <option value="">Prefix</option>

        <option value="MR">MR</option>

        <option value="MS">MS</option>

      </select>

    </div>



    <div class="col-md-3 col-sm-3">

      <select class="form-control"

              formControlName="position">

        <option value="">Position</option>

        <option value="admin">admin</option>

        <option value="student">student</option>

      </select>

    </div>



    <div class="col-md-3 col-sm-3">

      <select class="form-control"

              formControlName="gender">

        <option value="">Gender</option>

        <option value="M">male</option>

        <option value="F">female</option>

      </select>

    </div>



    <div class="col-md-3 col-sm-3">

      <button class="btn btn-primary"

              (click)="search(form.value)">Search</button>

    </div>

  </div>



</form><br/>

For the full code example you can check here:
https://stackblitz.com/edit/ng6-multiple-search-values-smz1cb-solved-jx6kgc?file=src%2Fapp%2Fuser%2Ffilter.pipe.ts

How can I implement that age range pipe in the code and make it the part of this working example?

I solve your problem but without using pipes I make the logic in the filter function you made in the (user-list.component.ts) you can check it here :

https://stackblitz.com/edit/ng6-multiple-search-values-smz1cb-solved-age-range?file=src%2Fapp%2Fuser%2Fuser-list%2Fuser-list.component.html

Hope my answer help you