Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_pipe

< Angular

Angular - Pipe

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

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>

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

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:

src/app/app.component.spec.ts
//...
import { SalaryhufPipe } from './shared/pipe/salaryhuf.pipe'; //<---
 
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        SalaryhufPipe     // <-------------
      ],
    }).compileComponents();
  });
 
//...
});
oktatas/web/angular/angular_pipe.txt · Utolsó módosítás: 2024/08/16 19:41 szerkesztette: admin