Angular Basics: Using Pipes in Angular

Angular offers a set of pipe options to transform the way your data is displayed, allowing you to control just how it looks. Let’s examine some of these options.

Even if you’re just getting started in Angular, you already know that most of the things we do while building web applications revolve around data—getting data, traversing data, manipulating data and finally presenting data. In this post, we will look at one of the ways Angular has made manipulating and presenting data easy for us.

Prerequisites

To be able to follow along with this article’s demonstration, you should have:

• An integrated development environment (IDE) like VS Code
• Node version 11.0 installed on your machine
• Node Package Manager version 6.7 (it usually ships with Node installation)
• Angular CLI version 8.0 or above
• The latest version of Angular (version 12)

// run the command in a terminal
ng version

Confirm that you are using version 12, and update to 12 if you are not.

Other things that will be nice-to-haves are:

• Working knowledge of the Angular framework at a beginner level

Transforming Data in Angular

A lot of times we do not have control of the data that comes into our web applications. However, Angular ensures that we have total control of how the data can be presented. Angular provides pipes for us to transform data to the exact form we want it to be presented, like someone might have 10–01–2021 and you want that to be 10th of January, 2021—Angular lets you do that with pipes.

What We Will Be Building

We will build a simple Angular application to showcase the major types of pipes available by default in Angular.

Setting up

To start off, open VS Code and in the terminal create a new angular app with the command below:

ng new newapp

This scaffolds a new Angular project in the directory where you ran the command. Now change the directory to navigate into the app root folder with this command:

cd newapp

You can test to see that everything works well by running this new app in the development server with the command:

ng serve

You will see that in your localhost:4200 location in your browser, the default page for the Angular scaffold is displayed. Now, open your app.component.html file and replace the content with this code block below:

<div>
  <h1>
    Hi, this is our testing ground
  </h1>
  {{title}}
</div>  

Your app.component.ts file should look exactly like this:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'newapp';
}

This project will not focus on styling, so in the app component CSS file, add this one style rule:

div{
    font-size: 20px;
}

With this, we are ready to take a look at all the built-in pipes in Angular.

Uppercase and Lowercase Pipes

These built-in pipes in Angular transform all the string data you apply them on to either uppercase or lowercase, no matter how the string’s state is currently. This is a good way to format data in sync with how your UI should be. Copy the code block below into your app component HTML file:

<div>
  <h1>
    Hi, this is our testing ground
  </h1>
 <h2> {{title | lowercase}} </h2>
<h2> {{title | uppercase}} </h2>
</div>

When you run this in your dev server, your browser display should look like this:

Title Case Pipes

This transforms any string to title case, which means that after the transform the first letters of every word are capitalized. It recognizes words with delimiters such as space, tab or any line-feed character. Copy the code block below into your app component HTML file:

<div>
  <h1>
    Hi, this is our testing ground
  </h1>
 <h2> {{title | lowercase}} </h2>
<h2> {{title | uppercase}} </h2>
<h2> {{text | titlecase}} </h2>
</div>

In your app component.ts file, update the variables with text like so:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Newapp';
  name = 'Lotanna';
  text = 'hi, welcome to ghana'
}

The app will now look like this when you run it on your dev server:

The Slice Pipe

This pipe transforms a string into a sliced version of the said string, so if you wanted to cut a string from the fourth character to the 12th character, this is the pipe to use to achieve exactly that. It creates a new array or string containing a defined subset of a given string. The syntax looks like this:

{{ value_expression | slice : start [ : end ] }}

We see that it comes with some kind of arguments, the start and the end argument, which is optional. Adding a slice pipe to our working example, we have something like this:

<div>
  <h1>
    Hi, this is our testing ground
  </h1>
 <h2> {{title | lowercase}} </h2>
<h2> {{title | uppercase}} </h2>
<h2> {{text | titlecase}} </h2>
<h2> {{text | slice:3}} </h2>
<h2> {{text | slice:3:6}} </h2>
</div>

The first slice pipe has no second argument—remember that the second argument is optional. The first one says slice from the third element and the second slice says start from the third element but end at the sixth without including the sixth element. So you have something like this:

The JSON Pipe

This pipe basically displays an object child node as a JSON representation. The syntax looks like this:

{{ value_expression | json }}

To work with this, let’s add an object to the template first. Open your app.component.ts file and replace the content with the code block below:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Newapp';
  name = 'Lotanna';
  text = 'hi,welcome to ghana'
  friend = {
    'name': 'Hafeez Babatunde',
    'car': 'Tesla Roadstar',
    'age': 15
  }
}

In your template file, add the new JSON line in the code block below:

<div>
  <h1>
    Hi, this is our testing ground
  </h1>
 <h2> {{title | lowercase}} </h2>
<h2> {{title | uppercase}} </h2>
<h2> {{text | titlecase}} </h2>
<h2> {{text | slice:3}} </h2>
<h2> {{text | slice:3:6}} </h2>
<h2> {{friend | json}} </h2>
</div>

This will appear like so in your browser:

Without the JSON pipe, there is no way you would be able to display the content of that object with this data binding setup, but pipes make it very possible and straightforward too.

Wrapping up

In this post, you have learned how to transform data in Angular using pipes. You have seen why pipes are useful and how they can be used in your workflow. We focused on built-in pipes in Angular with reference to strings. You can see the full documentation of pipes in the Angular Docs. Happy hacking!