Scribd
Upload
2 views

2. angular lab assignment pipe

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
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

2. angular lab assignment pipe

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
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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 mypipe.pipe.ts

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 pipe.ts reference has been added into app.module.ts.

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 app.component.ts)
<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