szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular:angular_filter|< Angular]]

====== Angular PipeTransform több mezővel ======

  * **Szerző:** Sallai András
  * Copyright (c) 2023, Sallai András
  * Szerkesztve: 2023, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Angular 17 és utána =====

Készítsünk két keresőmezőt, név és település keresésre:

<code javascript>
actName !: string;
actCity !: string;
</code>

<code html>
<input [(ngModel)]="actName">
<input [(ngModel)]="actCity">
</code>


Pipe készítése:

  ng g p shared/pipe/empfilter

A szűrő:

<code javascript>
  transform(values: any[], filter: { name: string; city: string; }): any {
    if (!values || (!filter.name && !filter.city)) {
      return values;
    }
    return values.filter(value => {
      return (
        (!filter.name || value.name.toLowerCase()
        .includes(filter.name.toLowerCase())) 
        &&
        (!filter.city || value.city.toLowerCase()
        .includes(filter.city.toLowerCase()))
      );
    });
  }
</code>

A szűrő használata:

<code html>
  <tbody>
    @for(emp of employees | empfilter: {name: actName, city: actCity} ; track emp.id) {
      <tr>
        <td>{{emp.id}}</td>
        <td>{{emp.name}}</td>
        <td>{{emp.city}}</td>
        <td>{{emp.salary}}</td>
      </tr>
    }
  </tbody>
</code>

===== Angular 16 és előtte =====

<code javascript>
  imports: [
    FormsModule    
  ],
</code>


<code javascript 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;  
    });
  }
}

</code>


<code javascript 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>
</code>

<code javascript 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" },
    ]
    
  }

  

}

</code>