Angular pipes: Built in - lordoftheflies/angular-essential-training GitHub Wiki

An Angular Pipe is a template expression operator that does display value transformations. They are designed to be used in interpolation syntax and template statements within component template markup. The general idea being that you use a pipe after your statement that you wish to transform And the pipe will run on that statement value and return a final value that the template will display. Angular has built in pipes and you can also build your own pipes. The watchedOn property of a media item is being displayed as a raw date value. Let's see how we can use the Angular date pipe to format that for display. In the media-item.component.html file, we can use the pipe template expression operator after the mediaItem.watchedOn statement and follow the pipe with the term date. If we switch over to the browser, we can see the date value is now formatted. So back in the media-item.component.html file, the value to the left of the pipe is the value to be passed into the pipe for transformation. And the term to the right is the name of the pipe. Pipes can also support parameters. Parameters are set to the right of the pipe name separated by colons. The date supports a parameter of a string that represents date formatting, one of those being the term, short date. Let's add a colon and then short date in single quotes. This is a statement in the interpolation curly braces so we need to wrap string values with single quotes. And the date pipe is expecting a string parameter. Switching back to the browser, we can see the new formatted date value. If a pipe supports more than one parameter, you separate each by a colon. Let's go back to the code and add the slice pipe to the mediaItem.name output and use it to only show a max length of characters. The slice pipe takes a start position and a length. So we pipe mediaItem.name into slice and then add a colon and then the number 0, then another colon and the number 10. Over in the browser, we see the longer names have been truncated. Pipes can also be chained. Back in the code, let's add the uppercase pipe to the mediaItem.name output. So this is sending name into slice and slice is returning a transformed value which is then sent to uppercase, which returns the final value to the interpolation statement. Over in the browser, we can see the results. Let's go back to the code and do some final plumbing. And just remove the pipes on the name now that we've seen how we can chain them.