Angular › Pipes (Built-in & Custom)
What is a pipe in Angular and how do you use one in a template?
BeginnerAnswer
A pipe transforms a value directly inside your template for display purposes, without needing to write that transformation logic inside your component class. You apply a pipe using the vertical bar symbol after a value in interpolation.
@Component({
selector: 'app-example',
template: `<p>{{ price | currency }}</p>`
})
export class ExampleComponent {
price = 19.99;
}Real-world example A product page displays a price value as a properly formatted currency amount directly in the template, using the built in currency pipe instead of manually formatting the number in the component class.