Reynald shows how to create a custom pipe. This pipe will be used to filter content entered in the input box as our search filter for the movie database. This code simply transforms the list of movies in an array into a filtered list based on the string the user enters in the filter string array. We check for null, and then convert to lowercase to make precise comparisons since it’s case sensitive. Lastly, we return the filtered movies.
- [Instructor] Earlier on, we showed how to use…pipes to transform data such as the stars in our movies…to be all in caps, and also to show the cost of the tickets…using the US dollar signs.…We can also use pipes for filtering,…and that's how were going to complete our search filter.…The first thing we want to do is…since the pipes we're creating only filters movies,…let's make the name reflect that in the Movies folder.…Let's create a TypeScript file…and call it movie-filter.pipe.ts.…
Within that file, let's create our class.…We use the keyword export…to make sure that it's importable from other modules.…The class name will be called MovieFilterPipe,…and it's going to implement PipeTransform interface.…That's the reason why we're getting an error right now,…because we're not importing that interface.…So let's go ahead and do that.…Now this error should go away.…Now, we'll get another error, because we need to implement…the properties of the interface.…
If we look at the error message, it says…Property transform is missing in type MovieFilterPipe,…
- Creating components
- Bootstrapping components
- Working with templates
- Using directives and interpolation
- Binding and transforming data
- Creating advanced and nested components
- Creating services
- Obtaining data with HTTP calls
- Configuring routes
Skill Level Intermediate
1. Course Overview
3. Directives, Interpolation, and Templates
5. Advanced Components
7. Obtaining Data with HTTP
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.