1 00:00:00,360 --> 00:00:05,400 In this lecture, we are going to add styling to our links based on the current path. 2 00:00:05,700 --> 00:00:10,080 We can improve user experience by highlighting a link when it's active. 3 00:00:10,440 --> 00:00:15,780 Highlighting links can help the user indicate where they are in our app besides looking at the address 4 00:00:15,780 --> 00:00:16,200 bar. 5 00:00:16,500 --> 00:00:18,930 It's a common feature to add to an app. 6 00:00:19,500 --> 00:00:24,060 For example, when we click on the about link, the link remains unchanged. 7 00:00:24,240 --> 00:00:28,470 We should change the color of the link when the user is on the about page. 8 00:00:28,800 --> 00:00:33,180 Angular introduces a directive for helping us accomplish this action. 9 00:00:33,510 --> 00:00:36,240 Let's open the navigation template file. 10 00:00:38,700 --> 00:00:45,450 Search for the about link in the template on the anchor element, we can apply a directive called Router 11 00:00:45,450 --> 00:00:46,560 Link Active. 12 00:00:49,090 --> 00:00:56,230 The router link active DirecTV will apply a class to an element if a path is active, it cooperates 13 00:00:56,230 --> 00:00:58,630 nicely with the router link DIRECTV. 14 00:00:59,020 --> 00:01:03,970 This DirecTV will check if the router link DirecTV is applied to the same element. 15 00:01:04,269 --> 00:01:11,020 If so, the path passed into the router linked DirecTV will be compared to the path in the address bar 16 00:01:11,020 --> 00:01:11,890 of the browser. 17 00:01:12,280 --> 00:01:14,350 A class is applied to the element. 18 00:01:14,350 --> 00:01:21,250 If there's a match, the name of the class can be configured by passing in the class name to the DirecTV. 19 00:01:21,580 --> 00:01:26,920 Let's change the color of the link by adding the text Indigo 400 class. 20 00:01:29,400 --> 00:01:32,760 This class will be dynamically attached to the element. 21 00:01:33,060 --> 00:01:38,490 In some cases, we may need to apply classes to the parent element of the link. 22 00:01:38,880 --> 00:01:43,650 The Router Link Active Directive can be applied to parent elements of links. 23 00:01:43,950 --> 00:01:48,450 For example, let's add the same directive to the list item element. 24 00:01:48,750 --> 00:01:53,730 The name of the class to attach will be called Text Indigo 400. 25 00:01:56,270 --> 00:02:02,870 If the router link active DirecTV cannot find the router link DirecTV, it'll search for this directive 26 00:02:02,870 --> 00:02:04,250 on the child element. 27 00:02:04,580 --> 00:02:08,900 We can apply this directive directly to the link or the parent element. 28 00:02:09,259 --> 00:02:10,520 Either case works. 29 00:02:10,699 --> 00:02:12,290 Let's give our link a test. 30 00:02:12,560 --> 00:02:14,570 Refresh the page in the browser. 31 00:02:17,070 --> 00:02:23,520 I'm on the home page, therefore the class never gets applied to the about link, the moment we click 32 00:02:23,520 --> 00:02:26,010 on the about link, its color changes. 33 00:02:26,250 --> 00:02:30,120 We should check if the class gets applied to the parent element. 34 00:02:30,420 --> 00:02:32,970 Inspect the link with the developer tools. 35 00:02:35,420 --> 00:02:36,080 Perfect. 36 00:02:36,350 --> 00:02:41,270 The text Indigo 400 Class gets attached to the link item element. 37 00:02:41,630 --> 00:02:44,420 This is the exact behavior we were looking for. 38 00:02:44,720 --> 00:02:50,030 Attaching dynamic elements is easy, but there is a common gotcha we should be aware of. 39 00:02:50,330 --> 00:02:55,520 Active classes may get attached to elements that don't have an exact match. 40 00:02:55,790 --> 00:02:57,260 Let me show you what I mean. 41 00:02:57,470 --> 00:02:59,030 Switch back to the editor. 42 00:03:01,530 --> 00:03:06,210 Let's make a copy of the router link and router link, active direct debits. 43 00:03:08,620 --> 00:03:15,280 Next, we will apply these directives to the Manage link in the navigation menu again. 44 00:03:15,460 --> 00:03:18,340 Be sure to remove the RF attribute. 45 00:03:20,850 --> 00:03:26,640 Lastly, we will update the path in the router or link DirecTV to point to the home page. 46 00:03:29,150 --> 00:03:33,680 In a future lecture, we will update this link to point to a proper route. 47 00:03:33,980 --> 00:03:37,190 For now, we will point this link to the home page. 48 00:03:37,460 --> 00:03:40,550 Let's navigate to the about page in the browser. 49 00:03:43,080 --> 00:03:46,210 If you aren't already logging to your application. 50 00:03:46,470 --> 00:03:49,890 Otherwise, you may not be able to see the Manage link. 51 00:03:50,220 --> 00:03:56,130 The links are highlighted in the navigation menu, which is excellent, but there's one problem we're 52 00:03:56,130 --> 00:03:59,850 on the about page, but the Manage Link gets highlighted. 53 00:04:00,180 --> 00:04:02,790 This behavior can be confusing to users. 54 00:04:03,030 --> 00:04:05,790 These links have completely different paths. 55 00:04:06,270 --> 00:04:12,060 We are encountering this issue because of the default behavior of the Router Link Active Directive. 56 00:04:12,390 --> 00:04:16,140 By default, this directive will perform a partial match. 57 00:04:18,670 --> 00:04:25,960 Here's a diagram to break down this behavior the current path is Slash about angular will perform a 58 00:04:25,960 --> 00:04:27,940 partial match against our links. 59 00:04:28,210 --> 00:04:34,060 If a link partially matches the path in the address bar, Angular will consider it a match. 60 00:04:34,390 --> 00:04:37,770 Technically, every path contains a forward slash. 61 00:04:38,020 --> 00:04:43,360 Therefore, Angular will consider every link that points to the home page to be active. 62 00:04:43,720 --> 00:04:46,390 This is why we manage link changes color. 63 00:04:48,910 --> 00:04:52,300 Partial matching may not be the behavior you're looking for. 64 00:04:52,540 --> 00:04:56,020 It can cause a lynx appearance to change unexpectedly. 65 00:04:56,320 --> 00:05:01,150 We can override this behavior by binding an object of options to the link. 66 00:05:01,510 --> 00:05:07,570 In the resource section of this lecture, I provide a link to the Router Link Active Directive. 67 00:05:08,410 --> 00:05:14,830 Typically, you will want to refer to the documentation for more information on how to configure a directive. 68 00:05:15,190 --> 00:05:17,830 Let's scroll down to the property section. 69 00:05:18,190 --> 00:05:23,320 One of the properties listed on this page is called Router Link Active Options. 70 00:05:23,590 --> 00:05:28,990 Believe it or not, directives can have properties decorated with the input decorator. 71 00:05:29,320 --> 00:05:34,180 This feature implies we can pass on additional values to this directive. 72 00:05:34,780 --> 00:05:40,240 According to the documentation, we can pass in an object to configure the directive. 73 00:05:40,630 --> 00:05:44,170 One of the properties in the object is called exact. 74 00:05:44,500 --> 00:05:49,780 If we set this property to true, angular will enforce exact matching. 75 00:05:50,110 --> 00:05:56,260 Classes will only be applied if the path matches 100 percent to the path in the URL. 76 00:05:56,890 --> 00:06:00,700 Let's head back to the ED and the navigation component. 77 00:06:00,850 --> 00:06:06,700 We will update the Manage link by binding an option called Router Link Active Options. 78 00:06:09,210 --> 00:06:13,620 This property will be bound to an object inside this object. 79 00:06:13,710 --> 00:06:17,730 We will add the exact property with a value of tril. 80 00:06:20,430 --> 00:06:22,380 Refresh the app in the browser. 81 00:06:24,910 --> 00:06:28,390 This time, the Manage Link does not get highlighted. 82 00:06:28,750 --> 00:06:32,950 We can navigate to the home page to test if the link gets highlighted. 83 00:06:33,340 --> 00:06:36,490 We have successfully highlighted the links in our app. 84 00:06:36,850 --> 00:06:40,540 It can be tricky because of angular as partial matching behavior. 85 00:06:40,840 --> 00:06:45,070 You should always be aware of this behavior whenever your styling links.