< Angular filter

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

Kezdés

Projekt létrehozása:

ng new app01

Komponens létrehozása:

ng generate component employees

Röviden:

ng g c employees

Angular 17 és utána

FormsModule

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

Pipe generálása

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

Ezt kapjuk

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

A pipe

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())); } }

Használat

TypeScript fájl:

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.

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>

Angular 16 és korábbi verziókban

Pipe generálása

ng genereate pipe shared/pipe/empfilter

Rövidítve:

ng g p shared/pipe/empfilter

Ezt kapjuk:

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

A szűrő használata

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

Teljes kód

import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { EmployeesComponent } from './employees/employees.component'; import { EmpfilterPipe } from './shared/pipe/empfilter.pipe'; @NgModule({ declarations: [ AppComponent, EmployeesComponent, EmpfilterPipe ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'empfilter' }) export class EmpfilterPipe implements PipeTransform { transform(values: any[], filter: Number): any { if (!values || !filter) { return values; } return values.filter(value => value.positionId == filter); } }
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-employees', templateUrl: './employees.component.html', styleUrls: ['./employees.component.css'] }) export class EmployeesComponent implements OnInit { actPosition !: number; employees = [ {"id": 1, "name": "Peres Béla", "positionId": 1}, {"id": 2, "name": "Energia Árpád", "positionId": 1}, {"id": 3, "name": "Gyenge Valér", "positionId": 2}, {"id": 4, "name": "Pásztó László", "positionId": 2}, {"id": 5, "name": "Trombita Béla", "positionId": 3}, {"id": 6, "name": "Rendes Lajos", "positionId": 3}, ]; constructor() { } ngOnInit(): void { } }
<h2>Dolgozók</h2> <input [(ngModel)]="actPosition"> <table> <tr *ngFor="let employee of employees | empfilter:actPosition "> <td>{{employee.id}}</td> <td>{{employee.name}}</td> </tr> </table>