Angular PipeTransform

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

Projekt létrehozása:

ng new app01

Komponens létrehozása:

ng generate component employees

Röviden:

ng g c employees

src/app/employee/employee.compoent.html

import { FormsModule } from '@angular/forms';
//...
imports: [FormsModule],

A pipe generálása megegyezik az Angular 16 előtt és utána.

ng genereate pipe shared/pipe/empfilter

Rövidítve:

ng g p shared/pipe/empfilter

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

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'empfilter',
  standalone: true
})
export class EmpfilterPipe implements PipeTransform {
 
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
 
}

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

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'empfilter',
  standalone: true
})
export class EmpfilterPipe implements PipeTransform {
 
  transform(values: any[], filter: String): any {
    if (!values || !filter) {
      return values;
    }
    return values.filter(value => 
      value.city.toLowerCase()
      .includes(filter.toLowerCase()));
  }
 
}

TypeScript fájl:

src/app/employee/employee.component.html

import { Component } from '@angular/core';
import { EmpfilterPipe } from '../shared/pipe/empfilter.pipe';
import { FormsModule } from '@angular/forms';
 
@Component({
  selector: 'app-employee',
  standalone: true,
  imports: [EmpfilterPipe, FormsModule],
  templateUrl: './employee.component.html',
  styleUrl: './employee.component.css'
})
export class EmployeeComponent {
 
  actCity !: string;
 
  employees = [
    {id: 1, name: "Peres Béla", city: "Pécs", salary:395 },
    {id: 2, name: "Energia Árpád", city: "Szeged", salary: 397 },
    {id: 3, name: "Gyenge Valér", city: "Miskolc", salary: 398 },
    {id: 4, name: "Pásztó László", city: "Pécs", salary: 399 },
    {id: 5, name: "Trombita Béla", city: "Debrecen", salary: 400 },
    {id: 6, name: "Rendes Lajos", city: "Szeged", salary: 401 },
 
  ];
 
}

Importálni kell az EmpfilterPipe-t.

src/app/employee/employee.compoent.html

import { EmpfilterPipe } from '../shared/pipe/empfilter.pipe';
//...
imports: [EmpfilterPipe, FormsModule],

Az src/app/employee/employee.component.html részlete:

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

ng genereate pipe shared/pipe/empfilter

Rövidítve:

ng g p shared/pipe/empfilter

Ezt kapjuk:

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

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'empfilter'
})
export class EmpfilterPipe implements PipeTransform {
 
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
 
}

Az app.module.ts fájlban vegyük fel (Az ng g p parancs automatikusan beteszi):

  declarations: [
 
    EmpfilterPipe
  ],

Írjuk meg a szűrőt:

  transform(values: any[], filter: Number): any {
    if (!values || !filter) {
      return values;
    }
    return values.filter(value => value.positionId == filter);
  }

<table>
    <tr *ngFor="let employee of employees | empfilter:actPosition ">
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
    </tr>
</table>