1
00:00:00,150 --> 00:00:03,540
In this lecture, we are going to make one final adjustment.

2
00:00:03,780 --> 00:00:05,850
It's going to be a minimal change.

3
00:00:06,090 --> 00:00:08,460
I have the model opened in my browser.

4
00:00:08,700 --> 00:00:11,880
If I switch between tabs, everything works fine.

5
00:00:12,150 --> 00:00:15,270
Looking closely, the address bar has changed.

6
00:00:15,540 --> 00:00:18,240
A hash has been added to the URL.

7
00:00:18,900 --> 00:00:21,270
We are clicking on links in our component.

8
00:00:21,510 --> 00:00:24,570
We don't want the links to redirect to a different page.

9
00:00:24,780 --> 00:00:27,090
We should prevent the default behavior.

10
00:00:27,420 --> 00:00:30,030
There are various ways to tackle this problem.

11
00:00:30,330 --> 00:00:33,450
I think the simplest way is by returning false.

12
00:00:33,690 --> 00:00:35,220
Let me show you what I mean.

13
00:00:35,520 --> 00:00:38,850
Open the tabs container component class file.

14
00:00:41,500 --> 00:00:45,850
The selective function is responsible for handling the click event.

15
00:00:46,150 --> 00:00:51,580
Typically, we would accept the event object and call the prevent default method.

16
00:00:51,940 --> 00:00:54,880
This is one way of preventing the default behavior.

17
00:00:55,120 --> 00:00:57,730
Alternatively, we can return false.

18
00:01:00,200 --> 00:01:05,060
By returning, false angular will automatically prevent the default behavior.

19
00:01:05,360 --> 00:01:11,450
It's a simple way to stop the default behavior without adding a parameter for the event object.

20
00:01:11,810 --> 00:01:13,820
Let's try testing our tabs.

21
00:01:14,120 --> 00:01:18,710
Be sure to remove the hash from the URL if it's in the address bar.

22
00:01:20,200 --> 00:01:24,970
If I switch between tabs, the hash will not get added to the URL.

23
00:01:25,270 --> 00:01:28,150
We've completely prevented the default behavior.

24
00:01:28,360 --> 00:01:29,770
Pat yourself on the back.

25
00:01:30,100 --> 00:01:32,230
We have completed the tabs component.

26
00:01:32,740 --> 00:01:36,550
This entire section has been dedicated to designing components.

27
00:01:37,030 --> 00:01:41,020
There are so many things we need to consider when writing components.

28
00:01:41,230 --> 00:01:47,950
If we want ultimate reusability, learning how to decouple a component will allow us to drop it anywhere

29
00:01:47,950 --> 00:01:48,730
in our app.

30
00:01:49,090 --> 00:01:51,920
We've spent a lot of time designing components.

31
00:01:52,090 --> 00:01:53,710
It's time to move forward.

32
00:01:53,950 --> 00:01:57,820
In the next section, we are going to start working on our forms.

33
00:01:58,060 --> 00:01:59,110
I'll see you there.