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:
- Configure AppComponent to use inline template and styles
- Add the toolbar for your application
- Add the name of your application as a button link so that it takes the user to the home page when clicked on
- 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>.