Generating Directives and Pipes in Angular

Name: Generating Directives and Pipes in Angular
Author: Michaela Ochnich

This chapter will cover structural directives, attribute directives and pipes. It’ll introduce the built in directives and pipes provided by Angular. It’ll also demonstrate how to create your own pipe class using the CLI, as well as a structural and an attribute directive.

Preview the first lesson free — get full access to all 3 lessons.

Request a demo Sign in

Course: On-Demand

This lesson will show you how to create a custom pipe. In this case, a pipe that calculates and displays the average of an array. Pipes are used in angular templates to alter data into a different format before being displayed to the user. Angular provides a couple of different built-in pipes to handle data formatting for popular types like eighths, currency, or percentages, as well as casing for strings. Sometimes you may need to create a custom pipe to handle repeat data formatting for your specific use cases. The Angular CLI provides a schematic to create these custom pipes. So in a terminal window in the app directory, you can run the command: ng generate pipe, and then the name for your pipe. So this pipe is going to take in an array of numbers and then output the average of that array. And this command will generate two different files: one for the pipe class and then one is the test file. It also modifies the app.module file to declare the pipe that you just generated so it can be used in the application. So opening up the pipe class file that was generated, and that will be under the app folder. So the file has this pipe decorator here, and then the selector that's set here in the metadata is how this pipe will be called from the template. Then this transform method that's defined down here is the method that Angular is going to call when it encounters this pipe. The first parameter, value, is what's being passed into the pipe. In this case, it's gonna be the array of numbers. And so here I set that type for the value. Optional parameters can also be defined to configure how to transform this value. So for this pipe, I'll add a variable called round, which will be the number of decimal places to round the average to. And I'll set the default value for this optional parameter to two. Next, I'll add the code to this method that calculates the average of the array. So here I created a variable to hold the sum of the elements and initialized that to zero. And then looping through each element in the array, it's going to add that element's value to the total. And then at the end, it divides that total by the length of the value array. And then to complete this function, just return that rounded off average. So now with the custom pipe completed, I'll open up that main app component class and quickly define an array of random numbers to use. And then in the template, I'll pass that array to the custom pipe. And switching to the browser, you can see the calculated average is being displayed here, and it's being rounded off to the default two decimal places since I didn't pass in that optional parameter. Now going back to the template, I'll pass in that optional parameter and here I'll set that to four. And now switching back to the browser, that average is now being displayed rounded off to four decimal places instead of the default two. So that's everything for this lesson on creating a custom pipe. And in the next lesson, you'll learn how to create a custom attribute directive.

Intermediate Provider : Michaela Ochnich 3 Lessons · 18m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

What You'll Learn

Understand how Angular directives and pipes work, including structural directives, attribute directives, and pipes
Use the built-in directives and pipes provided by Angular
Create a custom pipe class using the Angular CLI
Create a custom structural directive
Create a custom attribute directive

Key Takeaways

The chapter covers structural directives, attribute directives, and pipes in Angular.
Angular provides built-in directives and pipes that this chapter introduces.
The Angular CLI can be used to generate a custom pipe class.
Learners build their own structural directive and attribute directive during the course.

Frequently Asked Questions

What does this course cover?

It covers structural directives, attribute directives, and pipes, including the built-in directives and pipes provided by Angular, and demonstrates how to create your own pipe class using the CLI as well as a structural and an attribute directive.

What will I learn to build in this course?

You will learn to create a custom pipe, a custom structural directive, and a custom attribute directive, and to understand how Angular directives and pipes work.

What lessons are included?

The course includes three lessons: Creating a Custom Pipe, Creating an Attribute Directive, and Creating a Structural Directive.

What skills are associated with this course?

The course relates to Angular (Web Framework), Angular CLI, Angular Components, Angular Material, Angular UI, and Ng Controller.

Does the course use any specific tooling to create a pipe?

Yes, it demonstrates how to create your own pipe class using the Angular CLI.