Scribd
Upload
7 views1 page

Angular Custom Pipe Tutorial

The document provides a step-by-step guide for creating a custom pipe in Angular named 'mypipe'. It includes instructions for generating the pipe, implementing the transformation logic based on a hobby input, and ensuring the pipe is referenced in the app module. Finally, it shows how to use the custom pipe in a component and run the application using Angular CLI commands.

Uploaded by

Suresh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views1 page

Angular Custom Pipe Tutorial

The document provides a step-by-step guide for creating a custom pipe in Angular named 'mypipe'. It includes instructions for generating the pipe, implementing the transformation logic based on a hobby input, and ensuring the pipe is referenced in the app module. Finally, it shows how to use the custom pipe in a component and run the application using Angular CLI commands.

Uploaded by

Suresh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Lab Assignment:Angular custom Pipe

Step 1: First create custom pipe type script file in integrated terminal of visual studio code. Write
following command

ng g pipe mypipe

Step 2: Write following code into [Link]

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


@Pipe({
3 name: 'mypipe'
4 })
5 export class MypipePipe implements PipeTransform {
6
7
transform(value: any, hobbie: string): any {
8 if(hobbie === 'dancing'){
9 return "good hobbie is "+value;
10 }
11
12
else
13 {
14 return "bad hobbie is "+value;
15 }
}
}

Step 3: Ensure that newly create [Link] reference has been added into [Link].

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


@Pipe({
3 name: 'mypipe'
4 })
5 export class MypipePipe implements PipeTransform {
6
7
transform(value: any, hobbie: string): any {
8 if(hobbie === 'dancing'){
9 return "good hobbie is "+value;
10 }
11
12
else
13 {
14 return "bad hobbie is "+value;
15 }
}
}
Step 4: Please write following code into your own component(here is [Link])
<h1>App Component</h1>
<ul>
<li *ngFor="let h of hobbies">{{ h | mypipe}}</li>
</ul>

Step 5: Run your code using following command

ng serve –open

You might also like