Angular custom pipe

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss creating a Custom Pipe in Angular. Let us understand this with an example.

Here is what we want to do. Depending on the gender of the employee, we want to display Mr. or Miss. prefixed to the employee name.

Code Explanation :
1. Import Pipe decorator and PipeTransform interface from Angular core

2. Notice "EmployeeTitlePipe" class is decorated with Pipe decorator to make it an Angular pipe

3. name property of the pipe decorator is set to employeeTitle. This name can then be used on any HTML page where you want this pipe functionality.

4. EmployeeTitlePipe class implements the PipeTransform interface. This interface has one method transform() which needs to be implemented.

5. Notice the transform method has 2 parameters. value parameter will receive the name of the employee and gender parameter receives the gender of the employee. The method returns a string i.e Mr. or Miss. prefixed to the name of the employee depending on their gender.

@Pipe({
name: 'employeeTitle'
})
export class EmployeeTitlePipe implements PipeTransform {
transform(value: string, gender: string): string {
return "Mr." + value;
else
return "Miss." + value;
}
}

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, EmployeeComponent, EmployeeListComponent, EmployeeTitlePipe],
bootstrap: [AppComponent]
})
export class AppModule { }

[atulbhoyar]

Its one the best explanation in simple and practical way !

[shru]

Best Angular 2 series I have watched. :)

[jayantiroy]

i like ur videos because you always explain reason behind the code

[dheerajmarwaha]

Dear Venkatesh, To avoid repeated 'value' variable, better to use conditional operator.return (gender.toLowerCase() == 'male' ? 'Mr. ' : 'Mrs. ') + value;

[santoshdube]

Thanks for creating and sharing video .... You "Makes learning simple" for us ....

[chetanpl]

Please used Itarnary operator in case of if else branch.

You are too good sir ..love you lot

[tilktovigourr]

Hey Venkat How do you record your Desktop , ,, is this Camera ?

[debender]

could please add a filter to search employ by name and then select the row with a check box. I have a similar situation but after filtering and then when I select the shuffled item in the reduced list, it selects the original item in that row rather than selecting the filetered row that is displayed. Let's say I have a custom filter to choose filter the employ list by name. I choose Mike in the filter. Then I see Only one row with name mike. lets say I have checkbox. and I select the checkbox with the row having name 'Mike'. so far so good. but now when I remove the filter I again 5 rows but also the first row gets selected with the name Tom along with the third row with the name 'mike'. Thank you.

[ankannaskar]

in employeelist.component.html you used the custom pipe employeetitle that requires 2 parameters. but while using the pipe u just pushed only one parameter employee.gender. Why??

[dayanandchauhan]

gender==toLowercase, , here I am not getting this point.., , toLovercase is JavaScript filter by help of convert sting upper case and lovewer case sting.. Here .. Male name and finale how to add here