Transform Display Values with Pipes

Lesson content

Description Pipes transform a value for display. Angular includes date, currency, percent, and async pipes. Custom pipes should be pure calculations without side effects. Code @Pipe({ name: 'initials', standalone: true }) export class InitialsPipe implements PipeTransform { transform(name: string) { return name.split(' ').map(part => part[0]).join('').toUpperCase(); } } Template {{ user.name | initials }} Note The exact APIs can vary by Angular releases. Keep the stable concept separate from API-specific changes. Tip Build the smallest working transform display values with pipes example first, then add production concerns such as errors, cleanup, typing, and tests. Key takeaway Do not use a pipe to perform HTTP requests or mutate application state.