In this lecture, we are going to make one final adjustment.
It's going to be a minimal change.
I have the model opened in my browser.
If I switch between tabs, everything works fine.
Looking closely, the address bar has changed.
A hash has been added to the URL.
We are clicking on links in our component.
We don't want the links to redirect to a different page.
We should prevent the default behavior.
There are various ways to tackle this problem.
I think the simplest way is by returning false.
Let me show you what I mean.
Open the tabs container component class file.
The selective function is responsible for handling the click event.
Typically, we would accept the event object and call the prevent default method.
This is one way of preventing the default behavior.
Alternatively, we can return false.
By returning, false angular will automatically prevent the default behavior.
It's a simple way to stop the default behavior without adding a parameter for the event object.
Let's try testing our tabs.
Be sure to remove the hash from the URL if it's in the address bar.
If I switch between tabs, the hash will not get added to the URL.
We've completely prevented the default behavior.
Pat yourself on the back.
We have completed the tabs component.
This entire section has been dedicated to designing components.
There are so many things we need to consider when writing components.
If we want ultimate reusability, learning how to decouple a component will allow us to drop it anywhere
in our app.
We've spent a lot of time designing components.
It's time to move forward.
In the next section, we are going to start working on our forms.
I'll see you there.