Pipes Overview
Explore the concept of pipes in Angular to format and transform data within templates. Understand built-in pipes and learn how to create custom pipes, starting with a new project setup. This lesson helps you enhance data presentation in your Angular applications.
We'll cover the following...
The next thing we’ll be focusing on are pipes. In this section, you’ll learn what pipes are. Before we get started, we’ll be working with a new project.
Creating a new project
If you’re running code locally, then you’ll need to run the following command:
ng new pipes
During the setup process, you’ll be asked to configure the project. Go with the default settings.
Here’s what the new project will look like:
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', async () => {
await page.navigateTo();
expect(await page.getTitleText()).toEqual('starter app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
What are pipes?
A pipe is a function for formatting a value. It’s a feature in templates that we can use to modify the output of an expression. It’s possible to use pipes outside of a template, but it’s rare to do so.
Angular comes with some built-in pipes. You can view the list of pipes available in the documentation: https://angular.io/api?type=pipe.
It’s also possible to develop custom pipes. We’ll be looking at both built-in and custom pipes.