{"id":1820,"date":"2023-11-29T05:00:00","date_gmt":"2023-11-29T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1820"},"modified":"2023-11-28T16:00:23","modified_gmt":"2023-11-29T00:00:23","slug":"routerlinkactive-directive","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/routerlinkactive-directive\/","title":{"rendered":"routerLinkActive directive"},"content":{"rendered":"\n

Have you ever wondered how to highlight a specific HTML element, such as a link or a button, when a particular URL is selected? Something similar to this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The good news is that there is a specific directive for this called routerLinkActive<\/a><\/code>. Here is how you can use it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The value set to routerLinkActive<\/code> is the name of a CSS class (or several CSS classes<\/a>) that gets applied to the HTML element when the current URL path matches the path of the routerLink<\/code> directive on that same element. In other words, if the path is page1<\/code>, then the button<\/code> element has an active<\/code> class applied to it.<\/p>\n\n\n\n

As a result, all I did to style the above example was add that CSS class definition to my global CSS file:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And that’s it! Note that the directive supports several other options documented here<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can see my example in action on Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever wondered how to highlight a specific HTML element, such as a link or a button, when a particular URL is selected? Something similar to this: The good news is that there is a specific directive for this called routerLinkActive. Here is how you can use it: The value set to routerLinkActive is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11,25],"tags":[],"class_list":["post-1820","post","type-post","status-publish","format-standard","hentry","category-angular","category-directives","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1820"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1820\/revisions"}],"predecessor-version":[{"id":1827,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1820\/revisions\/1827"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}