router-outlet is an Angular directive element that marks where Angular renders the component matched by the current URL. It belongs in the root component template when routing replaces direct component placement. section 6.3.2 section 24.2.2
Use router-outlet with these routing arrangements:
- Place it in the root component template to display components selected by top-level routes. section 24.2.2
- Nest it in a routed component to display components selected by child routes and URL segments. section 25.4
- Use multiple outlet elements when the routing arrangement must display components in multiple template locations. section 26.0 section 26.3
Root routing target
A minimal root component template is <router-outlet></router-outlet>. With routes for /store, /cart, and /checkout, Angular inserts the component matched by the current URL at that location. The document also needs <base href="/"> for routes to be applied. section 6.3.2 section 24.2.4
Listing 6.12. Defining the routing target in the app.component.ts file in the src/app folder
import { Component } from "@angular/core";
@Component({
selector: "app",
template: "<router-outlet></router-outlet>"
})
export class AppComponent { }
Inspect the complete root component definition using router-outlet as its template. section 6.3.2
