Angular - Pipe

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

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.

app/app.component.ts

//...
 
export class AppComponent {
  title = 'app01';
  date = new Date();
}

<p>
  {{title}}
</p>
<p>
  {{date | date: 'yyyy-MM-dd'}}
</p>

Legyen egy újabb plélda:

<p>
  {{ title | uppercase }}
</p>
 
<p>
  {{ date | date: 'short' }}
</p>

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

src/app/shared/pipe/salaryhuf.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'salaryhuf'
})
export class SalarhufPipe implements PipeTransform {
 
  transform(salary: number): string {
    return salary + ' Ft';
  }
 
}

src/app/app.component.ts

export class AppComponent {
  salary = 345000;
}

src/app/app.component.html

<p>
  {{ salary | salaryhuf }}
</p>

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:

src/app/app.component.spec.ts

//...
import { SalaryhufPipe } from './shared/pipe/salaryhuf.pipe'; //<---
 
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        SalaryhufPipe     // <-------------
      ],
    }).compileComponents();
  });
 
//...
});