Have the application root show component links and the content

Last Updated on: (senast uppdaterad på:) 27 juli, 2020

The app.component.ts is the root as the application loads:

app.component.ts
app.component.spec.ts
app.component.html
app.component.css

The app.component.ts would have content like:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularpizzeria';
}

and the HTML template (app.component.html) can have links to various parts in the component as well as “router-outlet” where a component can be loaded:

App component
<p></p>

<nav>
  <ul>
    <li><a routerLink="/ShowItem" routerLinkActive="active">ShowItem</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>