RouterLink and RouterOutlet both are angular attribute directives helps to find the route from the route collection and matching route loads the component and its underlying template will be rendered on the browser.

Why do we need these two directives as both of them does a similar job?

Yes, i understand in routerlink directive we define the path mapped to the route and same we can do with router outlet as well right? By defining optional name attribute in the router outlet directive and the same name you can use it with outlet property in a route we registered in a routes array.

Router link and router outlet directives difference is not clear

CodePudding user response：

RouterLink -> navigates and let the router engine know what component/route to render inside the router outlet

RouterOutlet -> acts as an anchor, by that I mean, it will determine where in the html the child/route/component should be rendered.

Both are interdependent on each other and work together to inform angular, where to route to and where to render the route on!

CodePudding user response：

RouterLink used to mention the path to navigate the component

<a [routerLink]="['url path']">

whereas RouterOutlet acts as a placeholder where the component needs to be rendered

<router-outlet></router-outlet>