String pipe | Standalone | Angular 17

 Do you know how to use String pipe in Angular 17 ?

        Pipes are basically used to change the format of the content we are displaying, in this there are different kinds of pipes are there. One of the type is String Pipe in this string we creating our own format for displaying the content ( i.e, user-name, menu-name etc,. ). 

Here the steps to create our own String Pipe Angular 17 :

Step 1 : Create a file in the format of your-file-name.pipe.ts in src/app of your project.

Step 2 : Create your own formatter's are use the example given below. 

import {Pipe, PipeTransform} from '@angular/core'

@Pipe({

    name : 'string',

    standalone: true

})

export class StringPipe implements PipeTransform {

    transform(value: string, operation: string): string {

        switch(operation) {

          case 'uppercase':

            return value.toUpperCase();

          case 'lowercase':

            return value.toLowerCase();

          case 'capitalize':

            return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();

          default:

            return value;

        }

      }

}

Step 3 : Import the Pipe which we are created in app.component.ts file. Because we don't have app.module.ts in Angular 17.

import { Component } from '@angular/core';

import { RouterOutlet } from '@angular/router';

import { StringPipe } from './services/StringPipe';

@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, StringPipe],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css',

})

export class AppComponent {

  title = 'DinaTechy';

}

Step 4 :  Use the following format to call the String pipe from app.component.html file.

<p>String in Uppercase: {{ title | string : 'uppercase' }}</p>

<p>String in Lowsercase: {{ title | string : 'lowercase' }}</p>

<p>String in Capitalize: {{ 'dinagaran.L' | string : 'capitalize' }}</p>

Step 5 : Save and Run your project, your see the the following in the browser..

Hope you found this blog useful, if it is share to your friends to improve their knowledge day by day...

If you have suggestion leave a comment.....

See you in the next blogggg......