In this lecture, we're going to start exploring some pipes, Angular comes with a couple of pipes built
into their framework.
We have the option of creating custom pipes too.
We will start with angular pipes.
They should cover most cases.
In the resource section of this lecture, I provide a link to an official list of pipes offered by Angular.
Before we move further, I think this would be a great opportunity to teach you how to navigate the
documentation.
It's going to be important later down the line when working on projects.
We can arrive at the documentation by clicking on the docs link at the top of the page.
Angular will provide a couple of guides for getting started on the sidebar.
There are additional links to different topics I find angular to be heavily documented.
Almost every corner of the framework has been documented for you before checking out the documentation.
We should verify we're reviewing the latest version.
Angular regularly pushes updates.
This means there are different versions of a document for each release.
We should always check reviewing the documentation for the correct version.
Otherwise, we may be working with outdated information on the sidebar.
We can select the version by default.
The documentation will select the most recent stable version of the framework.
After selecting the version, we might want to jump to the API reference.
An API reference is a list of every function and class in a framework.
We can get to the API reference by opening the reference menu item.
Under this menu item, there is a submenu called API Reference.
Click on it.
We will be taking to a long list of functions and classes in Angular.
Luckily, we won't have to scroll around to find what we want at the top of the page.
There's a filter.
We can apply to this page.
We will set the type to pipe.
Angular will present us with a list of every pipe available in the framework.
We will be exploring most of these above the list of pipes.
Angular will tell us which package contains the pipes.
Let's click on the common package.
By default, the common package is not imported into an angular project.
If we want pipes to be available in our app, we need to register this package.
According to the description, we can register this package through a module.
These pipes are exported from two modules.
They're the common and browser modules.
However, reading further, the description tells us these modules are registered for new projects.
Let's check out the app DCOP Module Détaillées File in our ED.
As we can see, the browser module has been registered, Angola's pipes are readily available in our
components.
Let's use our first pipe.
It won't be tricky at all.
The syntax for running a value through a pipe is simple.
The first pipe we will learn is called tidal case.
This pipe will capitalize the first letter of each word in a string.
Any other characters will be lowercase.
The goal of the title case pipe is to output a title.
It works for names to this pipe can be helpful for providing consistent formatting for titles and names.
Let's apply this pipe to our name in the app components.
Open the app component class.
Inside this class, we are going to convert the letters in the name to lowercase letters.
It'll give us an opportunity to test if the pipe is working.
Next, let's open the app template file.
Inside the first paragraph tag, we are going to update the expression we can apply a pipe by adding
the pipe character, followed by the name of the pipe finding the pipe character can vary from keyboard
to keyboard.
Typically, it can be found above the enter key while holding the shift key.
For this example, we will apply the title case pipe.
Pipes are applied after the expression has been evaluated whenever a value gets evaluated from the expression
we passed onto the pipe, the pipe will return a formatted value.
The formatted value will be output it onto the page.
Let's check out the page in the browser.
The name has been properly title cased, perfect.
You may notice the name below hasn't been changed.
If you can recall, the second expression will use a method for returning the property.
Pipes do not directly modify properties.
This is very important to remember the purpose of a pipe is to transform the outputs.
The value in the class will remain unchanged.
Pipes are incredibly helpful for formatting a value before rendering it on the page.
The value for the name property will always be lowercase, even after running it through a pipe.
Let's continue our journey in the next lecture.