[[oktatas:web:angular|< Angular]] ====== Angular - Pipe ====== * **Szerző:** Sallai András * Copyright (c) 2023, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A pipe ===== A pipe (cső) fogad valamilyen bemenetet, átalakítja, majd visszaadja az átalakított értékeket. --------------- -----> ------> --------------- Kétféle pipe létezik az Angularban: * pure - tiszta * unpure - nem tiszta A pipe mindig újra végrehajtódik, ha változó értéke megváltozik. Ha szimpla változó helyett egy objektumra állítjuk be a csővezetéket, akkor pure pipe esetén ha egy adattag változik a pipe nem hajtódik végre újra. De unpure esetén igen. A csöveket a "|" karakterrel hozzuk létre a HTML sablonban. ===== Beépített pipe ===== //... export class AppComponent { title = 'app01'; date = new Date(); }

{{title}}

{{date | date: 'yyyy-MM-dd'}}

Legyen egy újabb plélda:

{{ title | uppercase }}

{{ date | date: 'short' }}

===== Saját pipe ===== Például: ng g pipe shared/pipe/salaryhuf A parancs hatására: * src/app/**app.module.ts** fájlban regisztrálásra kerül pipe * src/app/shared/pipe/**salaryhuf.pipe.ts** létrejön * src/app/shared/pipe/**salaryhuf.pipe.spec.ts** létrejön import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'salaryhuf' }) export class SalarhufPipe implements PipeTransform { transform(salary: number): string { return salary + ' Ft'; } } export class AppComponent { salary = 345000; }

{{ salary | salaryhuf }}

==== A pipe tesztelése ==== Alapértelmezetten elkészül egy **salaryhuf.pipe.spec.ts** fájl. Ha azonban használjuk valamelyik komponensben, annak tesztjében fel kell venni a deklarációhoz. Például a fő komponensben: //... import { SalaryhufPipe } from './shared/pipe/salaryhuf.pipe'; //<--- describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ AppComponent, SalaryhufPipe // <------------- ], }).compileComponents(); }); //... });