CODEWITHSUNDEEP
angularhtmlroutesrouter-outlet
nencat
nencat

Reputation: 53

angular 6 router outlet only showing the first component

I am working to convert an HTML5 template into an Angular 6 SPA. The HTML5 template has 7 sections that I have converted into 7 components: Home, About, Gallery, Services, Clients, Testimonials and Pricing.

In the app.component.html I have:

<app-header></app-header>
<app-about></app-about>
<app-gallery></app-gallery>
<app-services></app-services> 
<app-testimonials></app-testimonials>     
<app-clients></app-clients>
<app-pricing></app-pricing>
<app-footer></app-footer>

and the SPA shows properly (but still not using angular routing).

When I substitute the above code in app.component.html with <router-outlet></router-outlet>, the problem I have is that only the header.component.html shows up.

The app-routing.module.ts is as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '../../node_modules/@angular/router';

import { HeaderComponent } from './header/header.component';
import { AboutComponent } from './about/about.component';
import { GalleryComponent } from './gallery/gallery.component';
import { ServicesComponent } from './services/services.component';
import { ClientsComponent } from './clients/clients.component';
import { TestimonialsComponent } from './testimonials/testimonials.component';
import { PricingComponent } from './pricing/pricing.component';

const routes: Routes = [
  {path:'', redirectTo:'/home', pathMatch: 'full'},
  {path:'home', component: HeaderComponent},
  {path:'about', component: AboutComponent},
  {path:'gallery', component: GalleryComponent},
  {path:'services', component: ServicesComponent},
  {path:'clients', component: ClientsComponent},
  {path:'testimonials', component: TestimonialsComponent},
  {path:'pricing', component: PricingComponent}
];

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

My question is: why the <router-outlet></router-outlet> is only showing the header component and none of the other 6 components?.

How do I specify to angular, which components I want to show in the landing page?.

Upvotes: 0

Views: 2839

Answers (1)

DeborahK
DeborahK

Reputation: 60518

When you use a router-outlet and set up a routing configuration as you have it, the router will display one component's template within that router outlet at a time.

If you want to display all of the components at once, leave the code as you had it. You don't need routing.

If you do want to display one component at a time, you need some mechanism that determines which component's template to display when.

For example, in my code I have a menu and a router outlet:

<nav class='navbar navbar-expand navbar-light bg-light'>
    <a class='navbar-brand'>{{pageTitle}}</a>
    <ul class='nav nav-pills'>
      <li><a class='nav-link' [routerLink]="['/welcome']">Home</a></li>
      <li><a class='nav-link' [routerLink]="['/products']">Product List</a></li>
    </ul>
</nav>
<div class='container'>
  <router-outlet></router-outlet>
</div>

When the user selects a menu option, I display the component template for that menu option in the router outlet. In this example either a home page or the product list.

Upvotes: 1

Related Questions