{"id":741,"date":"2023-04-06T05:00:00","date_gmt":"2023-04-06T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=741"},"modified":"2023-04-04T17:50:41","modified_gmt":"2023-04-05T00:50:41","slug":"named-router-outlets","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/named-router-outlets\/","title":{"rendered":"Named router outlets"},"content":{"rendered":"\n<p>Using the Angular Router is one of the best ways to emulate multiple pages\/screens in an Angular application. However, we might sometimes want even more flexibility by having the equivalent of &#8220;sub-pages&#8221; where sibling elements on a web page can display dynamic content based on the current URL.<\/p>\n\n\n\n<p>Something like this where three different <code>divs<\/code> can display different components without a parent\/child relationship:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"232\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-1.png\" alt=\"\" class=\"wp-image-743\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-1.png 549w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-1-300x127.png 300w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Angular allows us to have named router outlets to support such scenarios. We can define several sibling outlets by giving them distinctive names like so:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"460\" height=\"216\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-2.png\" alt=\"\" class=\"wp-image-744\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-2.png 460w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-2-300x141.png 300w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Then, in our router config, we can define which component goes in which outlet for which path:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"74\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-3.png\" alt=\"\" class=\"wp-image-746\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-3.png 647w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-3-300x34.png 300w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Finally, when routing a component to an outlet, we have to repeat some of that config in the form of a rather lengthy command:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"31\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-4.png\" alt=\"\" class=\"wp-image-747\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-4.png 724w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-4-300x13.png 300w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The above code will load two different components in two different named outlets. You can see a <a href=\"https:\/\/stackblitz.com\/edit\/angular-5gco2m?file=src%2Fmain.ts,src%2Fmain.html\" target=\"_blank\" rel=\"noopener\" title=\"\">live example on Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using the Angular Router is one of the best ways to emulate multiple pages\/screens in an Angular application. However, we might sometimes want even more flexibility by having the equivalent of &#8220;sub-pages&#8221; where sibling elements on a web page can display dynamic content based on the current URL. Something like this where three different divs [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,25],"tags":[],"class_list":["post-741","post","type-post","status-publish","format-standard","hentry","category-angular","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/741","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=741"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/741\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/741\/revisions\/748"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}