Untitled

<mat-toolbar color="primary" class="main-toolbar">
  <span>TeamOne</span>
  <span class="spacer"></span>
  <button mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</button>
  <button mat-button routerLink="/teams" routerLinkActive="active">Teams</button>
  <button mat-button routerLink="/players" routerLinkActive="active">Players</button>
</mat-toolbar>
<div class="main-div">
  <router-outlet />
</div>


import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { TeamsComponent } from './components/teams/teams.component';
import { PlayersComponent } from './components/players/players.component';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'teams',
    component: TeamsComponent,
  },
  {
    path: 'players',
    component: PlayersComponent,
  },
];