Angular 7 Won't route to new page but component just gets displayed under previous component

1
votes

I am trying to have a navigation bar where when you click one of the subsections it will navigate you to a NEW page. As of now it when you click on one of the subsections in the nav that component is simply displayed under the existing component on the home page.

Here is my app.component.html 

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></a>
  <div class="navItemList">
    <a class="navbar navItem" routerLink="/about">Home</a>
    <a class="navbar navItem" routerLink="/about">About</a>
    <a class="navbar navItem" routerLink="/about">Scheduling</a>
    <a class="navbar navItem" routerLink="/about">Services</a>
  </div>
</nav>
<router-outlet></router-outlet>
<app-home></app-home>

Here is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
];

@NgModule({
  imports: [CommonModule,
    RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

For example, I want to display the AboutComponent on the page when "About" is clicked from the header. But when you click "About" right now what happens is it displays the HomeComponent and under that the AboutComponent.

3
angulartypescriptroutingangular-routing

3 Answers

0
votes

You need to remove <app-home></app-home> from your app.component.html. And change your router link to <a class="navbar navItem" routerLink="/home">Home</a> for the home button.

Then you need to add a path for the root/no path; or alternatively, you can add a catch-all at the end to catch all routes when there is no route; but be careful because order matters, so it needs to be last:

const routes: Routes = [
  {path: '', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent},
  {path: '**', component: HomeComponent },
];
0
votes

In <router-outlet></router-outlet>, corresponsing routes with their respective components are rendered.

So do the following:

  • Remove <app-home></app-home> from app.component.html

  • Change routes like this so that when the application starts (i.e no routes), it points to HomeComponent

    const routes: Routes = [
  {path: '', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
];

  • In your navlist, modify home like this: <a class="navbar navItem" routerLink="/home">Home</a>

0
votes
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: ' ', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
];

@NgModule({
  imports: [CommonModule,
    RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//-------------------------------------------

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></a>
  <div class="navItemList">
    <a class="navbar navItem" [routerLink]="['home']">Home</a>
    <a class="navbar navItem" [routerLink]="['about']">About</a>
    <a class="navbar navItem" [routerLink]="['scheduling']">Scheduling</a>
    <a class="navbar navItem" [routerLink]="['Services']">Services</a>
  </div>
</nav>
<router-outlet></router-outlet>
<app-home></app-home>