- [Instructor] In this section and the following section,
we're going to see how to define a pipe,
in Angular and how to test it.
So, what is a pipe?
A pipe is a class that transforms content
into an HTML output.
So, imagine you had an HTML template
and you wanted to display an expression.
So, this expression here could be some data
from your component.
You can use this syntax to pass the data through a pipe.
There are some standard pipes provided in Angular
and you can invent your own pipe as well.
It's a transformation.
It'll take your expression and it'll run it
through some transformation to output it
in a different format.
Some pipes take parameters.
Ultimately, this boils down to a function in a class.
So, this is effectively taking your value
or passing it into a function
and also potentially passing in parameters,
which help the pipe do the transformation.
Let me show you an example.
Imagine your component was a person
and that person had a full name.
You can pass the full name through the uppercase pipe.
That's the standard pipe provided by Angular.
Obviously, it converts your full name into uppercase.
Alternatively, if your salary is a number,
you can pass it into the currency pipe and it'll display,
there's a currency, you know, dollars or euros or whatever.
Here's another interesting example.
Imagine this is the date when you joined the company,
the date and time when you joined the company,
you can pass it through the date pipe.
Each of these is a standard pipe in Angular
and the date pipe takes a parameter,
specifying the format you want.
Optionally, you can say hours, minutes, seconds,
and then an AM or PM indicator.
So, the general syntax is in your HTML template
a piece of data that you want to output, pipe,
the name of the pipe followed by any parameters
that the pipe might take.
So, what we're gonna do in this section is see how
to define a custom pipe, as well as the standard ones.
And then, we'll see how to test it afterwards.
So, you can use the Angular CLI to help you generate a pipe.
You say NG, G for generate.
I'm generating a pipe and then you give it a name, okay?
So, this pipe I'm gonna generate flexi-titlecase.
It'll, the idea is you can give it a string
and it'll convert the first letter into uppercase
and the rest into lowercase, or the other way around, okay?
The first letter into lowercase
and then all the other letters into upper case.
So, it's a flexi-titlecase converter.
That's a pipe that we're gonna generate.
I've done that already.
If you go into the demo application.
So, it's example four, there's a demo application,
where we've generated flexi-titlecase pipe.
This is what it generates, Angular CLI,
in the source app folder.
It'll generate the file called flexi-titlecase
dot pipe, because it's a pipe.
There's the code and there's the test for the code.
Okay, so you can have a look at this.
In the example for demo app, let's see.
Here's the code and in my source app folder
here is my flexi-titlecase pipe.
So, I've implemented it fully.
I'll explain the code in a minute,
and then I've tested it fully as well,
and we'll see how the test works in the next section.
And then one other thing,
which is worth mentioning, Angular needs to know
about components and pipes.
So, in your model, you basically have to tell Angular
what components have you defined,
and what pipes have you defined?
Okay, so you have to declare in your NG model decorator,
you have to declare the Angular, what components
and pipes you have created, so that it knows about them.
So, we can establish them as necessary and apply them.
So, in the declarations section here app component
is my component class and flexi-titlecase pipe
is my pipe here.
Now, this was automatically added by Angular CLI.
Whenever you create a new component,
or whenever you create a new pipe Angular automatically
updates your module file to include
the definition in your module.
Okay, so that's good.
So, that means we're ready to start using
that pipe in our application.
So, let's see how to implement the pipe.
The pipe basically is a transformation.
It takes some property
and it runs it through a transformation function,
which you can write and whatever you return,
that's what gets rendered.
Right, well, here is my flexi-titlecase pipe.
So, things to observe.
First of all, it's a class which implements
the pipe transform interface.
Pipe transform is a standard Angular interface.
Okay, you have to implement the transform method.
More about that in a minute.
You'll also have noticed the pipe decorator.
This is how you implement the pipe, but the decorator,
basically, has to give it a name that he can use in HTML.
So, this pipe here says in your HTML template
this is the name of the pipe that you need to use
to basically invoke this pipe class, 'cause like a label.
So, flexi-titlecase pipe.
So, flexi-titlecase will invoke this pipe
or to be more specific.
It'll invoke this transform function.
Whenever you use this pipe, the value that
you're piping into it, but coming to the transform
function as the first parameter.
That's the value that you're trying to transform.
Okay, so that's the original value that
you're trying to transform.
You have to receive that.
And if you want to, your transform function
can also receive parameters to help you decide
how to transform it.
In my case, I decided to have a parameter
called upper lower.
It's either indicating to convert to uppercase
for the first letter, and then lower case
for the rest, or the other way around.
It returns a string.
The transformed output.
The implementation for this is just code actually.
Have a look.
The value that comes in, we're gonna convert it
into either titlecase with a capital or title case
with a lowercase letter, depends on this parameter.
If the parameter isn't upper
and it isn't lower, then it's an error.
In that case, we just return the value and transformed.
Otherwise, we take the incoming value, a string,
we split it at a space to give us an array of words.
And then, for each word, we either convert it
into the first character, uppercase, the rest lowercase,
or the other way around.
Okay, so I've kind of dot, dot, dotted the syntax here.
Ultimately, what we then do is get all those words
and join them together again into one giant string.
Probably worthwhile taking a look
at the actual code for that.
So, here we are.
Here is my flexi-titlecase pipe.
Okay, so like I said, you have to annotate it with pipe,
so it knows how to use the pipe in HTML.
Your pipe class has to implement pipe transform interface,
which means you have a transform function.
We see the original value, plus any parameters,
return a string unchanged if the parameter is invalid,
otherwise split the word, split the string into words.
If we're meant to convert to uppercase,
then what it'll do is it'll take the next word.
It'll take the first character and convert it to uppercase.
And it'll take the rest of the word
and convert it to lowercase.
Okay, so if the user said upper,
the first letter would be uppercased,
and the rest of the string will be lowercased.
Otherwise, it's the other way around.
The first character in each word will be lowercased,
and the rest of each word will be uppercased.
Okay, so it does that for each word.
Each word is converted, according to that kind of algorithm.
And at the end, we just join everything together again
into a string, and that's what we return.
So, that's my titlecase component.
Quite pleased with that actually.
Let's see how to use it.
So, to use that pipe, you would do something like this.
Here's my application component and it's got my full name.
So, my full name is Andrew Carl Olsen.
So, you didn't know that, did you?
That's my full name and here is my app component HTML.
So, first of all, I display my full name as it is.
And then, I pass my full name through
my flexi-titlecase pipe.
Remember, this here, corresponds to this here.
Whatever name you specify there,
that's the name that you're gonna use
in your HTML flexi-titlecase.
So, take the full name, pass it through that pipe.
Basically, it'll pass my full name
into this transform function.
Andrew Carl Olsen goes into there,
and whatever it returns, that's what's gonna be displayed.
Oh, it takes a parameter, parameters.
Each parameters is separated by a colon.
It looks a bit odd.
It's basically colon, the transform function for my pipe,
and it passes that into the parameter.
That would convert my full name into capital A,
capital C, capital O, rest would be lowercase.
And then, I use the other converter.
I basically convert it into lowercase
and see what that looks like.
All right, so that's, that should be fine.
Let's serve the application and see what it looks like.
There we go.
So, the full name was originally displayed
in its original format.
I passed it into my flexi-titlecase pipe
with an upper parameter, uppercase first letter,
lowercase for the rest.
And then, I did the same with the parameter set the lower.
So, the first parameter is lowercase and the first letter,
and then everything else is upper case.
So, that's my pipe.
Pretty much all pipes look, you know, similar to that.
Obviously, what you do inside here,
it depends what kind of data you've got
and how you wanna transform it,
but the basic idea is the same.
You will receive an input, plus some parameters,
and you have to return a string.
So, what we'll do in the next section is see
how to test this pipe, so that it's given a certain input
it returns the correct output.
We can test this to make sure that it works properly.