In this lecture, we're going to take a break from pipes to learn about the angular dev tools.
It's an official tool from the angular team for debugging applications in the browser.
It's a relatively new tool from the angular team.
In the resource section of this lecture, I provide a link to this tool.
Let's give the development tool a try.
On this page, there should be a link for installing this extension.
As of this recording of this video, the extension is only available for Google Chrome.
If you're using another browser, you may need to switch on the store page.
Install the extension.
The extension should have created an icon at the top right corner of the browser.
If you don't see the icon, it might be hidden.
Click on the puzzle piece icon.
There should be an extension called angular dev tools.
Click on the pin icon to have it pinned.
By default, the icon will be black.
If we click on the icon, the extension will tell us that hasn't detected the angular app.
Let's switch over to our app.
Almost immediately, the icon will turn red if we click on it.
Angular has been detected by the extension, however.
Where are the tools?
The developer tools must be open for viewing the new tool.
There should be a new panel called Angular.
On this panel, we will find a hierarchy of components for our application.
We can select the components to view its data.
For example, if we click on the post component, we can check out the properties inside the components.
Not only will the tool show us the components properties, but it'll also categorize the properties.
It makes it easier to sort through our data.
The properties are not read only we can freely modify these properties.
Any changes we make to the properties will be reflected in our app.
The main reason I'm showing the angular dev tools is to show how pipes affect our properties, switch
over to the app components.
The value for the main property has not changed.
It remains lowercase even though we've applied a pipe to this property in our template.
The pipe did not change the value in the class.
The developer tools are a great way of verifying this behavior.
Pipes do not change their properties.
They change.
The output in the template will be using the dev tools from time to time to help us debug our application
in the next lecture.
We'll jump back into pipes.