• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

  imports: [
    FormsModule    
  ],

src/app/shared/pipe/empfilter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'empfilter',
  pure: false
})
export class EmpfilterPipe implements PipeTransform {
  transform(values: any[], filter: {[key: string]:any}): any {
    if (!values || (!filter['actCity'] && !filter['actName'])) {
      return values;
    }    
    return values.filter(value => {
      if( !filter['actName'] && value.city.includes( filter['actCity'])) {
        return true;
      }
      if (value.city.includes( filter['actCity']) && value.name.includes( filter['actName'])) {
        return true;
      }
      return false;  
    });
  }
}

src/app/comp1/comp1.component.html

 
 
<input type="text" 
[(ngModel)]="actName"
placeholder="név"
>
<input type="text" 
[(ngModel)]="actCity"
placeholder="település"
>
 
<table>
    <thead>
        <tr>
            <th>Az</th>
            <th>Név</th>
            <th>Település</th>
        </tr>
    </thead>
    <tbody *ngFor="let emp of employees | empfilter: {actName: actName, actCity: actCity} ">
        <tr>
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
        </tr>
    </tbody>
</table>

src/app/comp1/comp1.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.scss']
})
export class Comp1Component implements OnInit {
  employees:any;
 
  actCity !: string;
  actName !: string;
 
  constructor() { }
 
  ngOnInit(): void {
    this.employees = [
      { "id": 1, "name": "Csendes Irén", "city": "Szeged" },
      { "id": 2, "name": "Csendes Borbála", "city": "Pécs" },
      { "id": 3, "name": "Felhős Béla", "city": "Szeged" },
      { "id": 4, "name": "Lind Evelin", "city": "Pécs" },
      { "id": 5, "name": "Csendes Lajos", "city": "Szegi" },
      { "id": 6, "name": "Csendes Ágnes", "city": "Szegi" },
      { "id": 7, "name": "Arany Tamás", "city": "Szegi" },
      { "id": 8, "name": "Rendes Valér", "city": "Szerencs" },
      { "id": 9, "name": "Éles Gábor", "city": "Szerencs" },
      { "id": 10, "name": "Remek Imre", "city": "Szegi" },
      { "id": 11, "name": "Vilka Lajos", "city": "Szegi" },
    ]
 
  }
 
 
 
}