szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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.

<code>
       ---------------
----->               ------>
       ---------------
</code>


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 =====

<code javascript app/app.component.ts>
//...

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

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

Legyen egy újabb példa:

<code html>
<p>
  {{ title | uppercase }}
</p>

<p>
  {{ date | date: 'short' }}
</p>
</code>

===== 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


<code javascript 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';
  }

}
</code>



<code javascript src/app/app.component.ts>
export class AppComponent {
  salary = 345000;
}
</code>

<code html src/app/app.component.html>
<p>
  {{ salary | salaryhuf }}
</p>
</code>


==== 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:

<code javascript src/app/app.component.spec.ts>
//...
import { SalaryhufPipe } from './shared/pipe/salaryhuf.pipe'; //<---

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

//...
});
</code>