We will discover how to build a pipe in an Angular application to reverse a string in this tutorial.

Required conditions
Basic familiarity with Angular 2 or later; installation of Node and NPM; Visual Studio Code; Bootstrap (Optional)

The command to create an Angular project is as follows.
ng new angapp

Now install Bootstrap by using the following command.
npm install bootstrap --save

Now open the styles.css file and add the Bootstrap file reference. To add a reference in the styles.css file, add this line.
@import '~bootstrap/dist/css/bootstrap.min.css';

Create a Reverse String Pipe
Now, create a custom pipe by using the following command.
ng generate pipe Reverse

Now open the Reverse.pipe.ts file and add the following code.
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverseString' })
export class Reverse implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value.split('').reverse().join('');
  }
}

Now, create a new component by using the following command.
ng g c actionmenu

Now open searchlist.actionmenu.html file and add the following code.
<div class="container" style="margin-top:10px;margin-bottom: 24px;">
    <p>{{ 'Artificial Intelligence' | reverseString }}</p>
</div>

Now open app.component.html file and add the following code.
<div class="container" style="margin-top:10px;margin-bottom: 24px;">
  <div class="col-sm-12 btn btn-info">
    Reverse String Pipe in Angular
  </div>
</div>
<app-actionmenu></app-actionmenu>

Now run the application using npm start and check the result: