Angular Academy · Lektion

Skapa egna pipes

Bygg återanvändbara transformations-pipes.

Lektion 3 av 413 steg

Skapa egna pipes är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Varför anpassade pipes?

När inbyggda pipes inte räcker till kan ni skapa en anpassad pipe för att kapsla in återanvändbar transformeringslogik för era mallar.

Dekoratören @Pipe

En pipe är en klass som dekorerats med @Pipe. Egenskapen name är det namn ni använder i mallar.

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

Implementera PipeTransform

En pipe-klass implementerar gränssnittet PipeTransform, som kräver en enda transform-metod.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

Metoden transform

Den första parametern i transform är värdet som pipen tillämpas på. Det ni returnerar blir det renderade resultatet.

transform(value: string): string {
  return value.trim();
}

Använda er pipe

Importera pipen till en fristående komponent och använd sedan dess namn i mallen, precis som för en inbyggd pipe.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Ta emot argument

Extra parametrar efter value blir pipe-argument. Anroparen skickar dem med kolon.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Standardvärden för argument

Ange standardvärden för argument så att anroparen kan utelämna dem. Det gör pipen flexibel.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Hantera null och undefined

Skydda alltid mot indata som saknas. Returnera ett rimligt reservvärde när värdet är null eller undefined.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Exempel på en truncate-pipe

Här är en praktisk pipe som förkortar lång text och lägger till en ellips.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Typa returvärdet

Ange returtypen så att TypeScript och era mallar förblir typsäkra. En pipe kan returnera vilken typ som helst, inte bara strängar.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Registrera i en modul (NgModule)

Om ni använder NgModules i stället för fristående komponenter deklarerar ni pipen i declarations och exporterar den vid behov.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Snabbtest

Testa er förståelse av anpassade pipes.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har byggt en anpassad pipe med @Pipe och PipeTransform, tagit emot argument med standardvärden, skyddat mot null och registrerat den i fristående komponenter eller NgModules.

Härnäst lär ni er om rena och orena pipes.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skapa egna pipes” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Skapa egna pipes”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skapa egna pipes”?

Bygg återanvändbara transformations-pipes. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Skapa egna pipes”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy