How Router-outlet in Angular is used?
This Article helps you to Understand, How Router-outlet in Angular is used to load the different components based on the router status.
The @angular/router package's router-outlet directive is used by the router to specify where in a template a matching component should be placed.
By including numerous outputs, you can create complex routing situations in your Angular application.
Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Each view will display any element you add to the shell; just the area indicated by the router outlet will change between views.
router outlet in app.component.ts
If your app has a home component, you may add the following route by simply adding it to the routes array::
After adding this route, the router will render the home component inside the router outlet of app.component.html when the home path is matched.
Naming a Router Outlet?
The name property can be used to give the router outlet a name. This allows us to add numerous outlets in same Angular template:
The outlet attribute of a route can be used to identify the router outlet where you wish to place the route component if your template has several outlets. For example:
In this instance, the HomeSidebarComponent will be inserted in the router outlet named sidebar when the home path matches. Because it is mapped to the secondary outlet, this route is known as an auxiliary route.
Routes that are connected to the primary outlet are referred to as primary routes.
