Home Angular How to Create Custom Pipe in Angular 16 Application?

How to Create Custom Pipe in Angular 16 Application?

by therichpost
0 comment
How to Create Custom Pipe in Angular 16 Application?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Create Custom Pipe in Angular 16 Application?

Working Demo
How to Create Custom Pipe in Angular 16 Application?
How to Create Custom Pipe in Angular 16 Application?

Angular16 came and if you are new then you must check below link:

  1. Angular 16 Tutorials

Here is the code snippet and please use carefully:

1. Very first guys, here are common basics steps to add angular 16 application on your machine and also we must have latest nodejs version installed for angular 16:

guys with below commands we will also get now pipe files

npm install -g @angular/cli 

ng new angularform // Set Angular 16 Application on your pc 

cd angularform // Go inside project folder 

ng g pipe wordcount

3. Now guys we will add below code into our angularform/src/app/app.component.ts file:

...
export class AppComponent {
  ...
  customText: string = "Java is to JavaScript what car is";
  
}

4. Now guys we will add below code into our angularform/src/app/app.component.html file for web output:

<h3>Word count is ``{{customText}}`` string is :<br>{{ customText | wordcount }}</h3>

5. Now guys we will add below code into our angularform/src/app/wordcount.pipe.ts file to create custom pipe functionality:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'wordcount'
})
export class WordcountPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value.trim().split(/\s+/).length;
  }
}

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.