Angular Fundamentals: Displaying Data With Pipes
Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 9th module: Displaying Data with Pipes
The previous modules are:
- Getting Started With Angular
- Creating and Communicating Between Angular Components
- Exploring the Angular Syntax
- Creating Reusable Angular Services
- Routing and Navigating Pages
- Collecting Data with Angular Forms and Validation
- Communicating Between Components
- Reusing Components with Content Projection
The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.
Joe introduces the module explaining why Angular Pipes don’t have all of the functionality that they originally did in Angular JS. They are no longer used for Sorting or Filtering lists of data.
Using Built-in Pipes
The first example is how to make text UPPERCASE. This is really easy because there is a built-in type called uppercase that does exactly what it says.
We see that there is also a date pipe which formats dates to make them a lot more readable. It can take parameters giving you control over how you want to format your dates. We see some common examples in this clip.
We also see how to use the currency pipe to display monetary amounts in a specified currency.
Try the lowercase practice exercise.
Try the Date Pipe with parameters practice exercise.
Creating a Custom Pipe
In this clip, we see how to create a custom pipe to product the duration of our events.
When creating a custom pipe we need to import and implement PipeTransform.
Our new pipe takes an integer and displays either ‘Half Hour’, ‘One Hour’, ‘Half Day’ or ‘Full Day’.
Sorting and Filtering Overview
Joe begins by explaining the concepts of primitive identity and object identity.
Unlike primitives, JavaScript considers two objects to be different even if they have the same values.
Next up, Joe explains mutability and how it affects change detection. Change detection is one of the areas in the original Angular JS where there could be performance problems.
We are also introduced to Impure Pipes here. Joe says these are the equivalent of filters in the old Angular JS.
Creating a Filtering Display
Our event’s sessions are categorized by difficulty level:
Beginner/Intermediate/Advanced
We want to allow filtering of our sessions list, adding buttons for All, Beginner, Intermediate and Advanced.
In our template we add four button tags with click bindings and class.active attributes.
Joes adds a filterBy string property to the EventDetailsComponent. The class.active attributes are updated to check the filterBy property has the value representing the relevant filter, and the click bindings are updated to set the filterBy values.
Note that none of this is using pipes! It has been included in this module because many Angular JS developers are used to using pipes for this scenario, but we see in the new Angular there is a better way.
Filtering Data
We pass the filterBy property into our session list by creating a filterBy property binding on the session-list element.
In our session list component we create a new input string property called filterBy.
Then we import the OnChanges interface into this component and create an ngOnChanges method.
Joe explains why we want to create another property called visibleSessions, and this is used in the filterSessions method.
Try the ngOnChanges Lifcycle hook practice exercise.
Try the filtering data practice exercise.
Sorting Data
In this clip Joe shows us how we can sort our list either by name, or by votes. For the sake of neatness, the buttons for these sorting functions go in a button group.
The techniques used here are similar to those used in the Filtering Data clip, but here we create new comparison functions sortByNameAsc and sortByVotesDesc.
The next module in this course is Understanding Angular’s Dependency Injection.
