Not able to display component via routing in Angular

Question

I have 3 components: A, B, and C. I want to display a button named "Component B" inside component A. On clicking the button, it should display B component with a link saying "Component C". On clicking the link it should display c component which says "C component works"

The app module is:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';

@NgModule({
    declarations: [
        AppComponent,
        AComponent,
        BComponent,
        CComponent
    ],
imports: [
    BrowserModule,
    AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

The app routing module is:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { AppComponent } from './app.component';


const routes: Routes = [
  {
    path: 'a',
    component: AComponent,
  },
  {
    path: 'a',
    component: BComponent,

  },
  {
    path: 'c', component: CComponent
  },
  { 
    path: '**', component: AppComponent 
  }
];

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

The app.component.html is :

<h3>Routing and Navigation</h3>

<router-outlet></router-outlet>

The A component is:

<h4>It is Component A</h4>
<a class="button" routerLink="a" routerLinkActive='active'>B component</a>
<router-outlet></router-outlet>

The B component is:

<a routerLink="b">C component</a>
<router-outlet></router-outlet>

The C component is:

<p>C component works</p>

Kindly help me with this as I am learning to route in Angular. I will be glad if I know the area of improvement in the code and a proper guidance. Thank you.

will these components be shown in the same window? like button A then under it button B then under it C component works ? — Mohamed Aljamil
– Mohamed Aljamil, Commented Jul 3, 2020 at 14:05

Mohamed Aljamil · Accepted Answer · 2020-07-03 14:36:05Z

1

here is a stackBlitz with a working example that has all 3 components.

https://angular-7ucy2h.stackblitz.io/a

the thing about angular routing is that if you want a child route to show inside of a parent route you will have to add that route as a child.

in your case C is a child of B and B is a child of A.

const routes: Routes = [
  {
    path: 'a',
    component: AComponent,
    children: [
      {path: 'b', component: BComponent, children: [
        {path: 'c', component: CComponent}
      ]},
    ]
  },
];

answered Jul 3, 2020 at 14:36

Mohamed Aljamil

3992 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shirish Pokhrel Over a year ago

The link doesn't work. Can you send it again if you have?

Mohamed Aljamil Over a year ago

thats weird i just tried it again the link works for me. here try again. angular-7ucy2h.stackblitz.io/a

Shirish Pokhrel Over a year ago

Also are there any error in other component because I implemented the child routes as you said but still I am not getting the output.

Mohamed Aljamil Over a year ago

are you able to see the stackblitz now or? try this link. it lets you see each component and how its written. stackblitz.com/edit/angular-7ucy2h. and no the stackBlitz I made has no errors

Mohamed Aljamil Over a year ago

please keep in mind that your app-component.html must have a <router-outlet></router-outlet> same goes for your A and B components.

|

Rick · Accepted Answer · 2020-07-03 15:35:26Z

0

You don't need routing at all to do what you are asking. If Component B & C are "inside" component A, then you don't route to them. you just display them.

<h4>It is Component A</h4>
<a class="button" (click)="showBFlg = true">B component</a>

<div *ngIf="showBFlg">
    <app-b></app-b>
    <a class="button" (click)="showCFlg = true">C component</a>
</div>

<app-c *ngIf="showCFlg"></app-c>

answered Jul 3, 2020 at 15:35

Rick

1,88213 silver badges21 bronze badges

2 Comments

Mohamed Aljamil Over a year ago

yes but in many cases developer want things separated by routes maybe this is one of them

chxpel Over a year ago

Separate routes can be very useful to end users because they allow you to bookmark more specific pages, share links to specific things, etc

Collectives™ on Stack Overflow

Not able to display component via routing in Angular

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related