< Angular

Angular - Pipe

Szerző: Sallai András

Copyright © Sallai András, 2023

Licenc: 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(); }
<p> {{title}} </p> <p> {{date | date: 'yyyy-MM-dd'}} </p>

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; }
<p> {{ salary | salaryhuf }} </p>

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