Angular 6 for Enterprise-Ready Web Applications

Router outlet

AppComponent is considered a root element for the root router defined in app-routing.module, which allows us to define outlets within this root element to dynamically load any content we wish using the <router-outlet> element:

1. Configure AppComponent to use inline template and styles
2. Add the toolbar for your application
3. Add the name of your application as a button link so that it takes the user to the home page when clicked on

4. Add <router-outlet> for the content to render:

src/app/app.component.ts...
template: `    <mat-toolbar color="primary">      <a mat-button routerLink="/home"><h1>LemonMart</h1></a>    </mat-toolbar>    <router-outlet></router-outlet>  `,

Now, the contents of home will render inside <router-outlet>.