Child Route not displaying correctly in angular

Question

I am using a stepper in angular and I need to display a component in one of the steps. I need to click on a button to load that component. I can see the child component getting inserted but it's not displaying correctly. When I inspect and go to that element in "Elements" tab then I can see the component inserted and when I hover then browser highlights at the right most corner. Here is routing module:

const routes: Routes = [
  {
      path: '',
      redirectTo: 'items',
      pathMatch: 'full'
  },
  {
    path: 'items',
    component: ItemsComponent,
    pathMatch: 'full'
  },
  {
    path: 'item/:id',
    component: ItemStepperComponent,
    children: [
      {path: 'subitem', component: SubItemComponent, pathMatch: 'full'}
    ]
  },
];

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

parent-stepper.html

<mat-horizontal-stepper #stepper [linear]="true">
   <mat-step *ngFor = "let step of steps; let i=index" [editable]="true">
     <button type="button" mat-raised-button (click) = "load()">Add Sub Item</button>
       <router-outlet></router-outlet>
   </mat-step>
</mat-horizontal-stepper>

parent-stepper.component.ts

load(){
   this._route.navigate(['subitem'], {relativeTo: this._ac});
}

If someone can suggest what I'm doing wrong here?

Note: I figured out that the problem is primarily with Material stepper. If I add a condition in then it displays it correctly. But the problem with this is that it loads the same component multiple times. If someone can suggest a more elegant solution.

My main component is app component and there I have another router-outlet. Parent Component is another one in that I need to load a child component. — Sunil Ojha, Jul 26 '19 at 10:21
I have got in parent-stepper.html below the button tag. And I'm able to route to it correctly and I can see the component inserted also. I added a console.log in child component ngOninit() and can see the log printed but it's the visibility that is causing the issue. — Sunil Ojha, Jul 26 '19 at 10:28

score 0 · Answer 1 · answered Jul 26 '19 at 10:57

0

If you are having child component you need to add in it's parent i.e ItemStepperComponent html. which renders its child router from it's html file.

answered Jul 26 '19 at 10:57

ajaykumar mp

487
5
12

I already have router-outlet in parent and that is why I can see the component inserted in html. The problem is that it is not getting displayed. – Sunil Ojha Jul 26 '19 at 11:32

score 0 · Answer 2 · answered Jul 26 '19 at 11:07

try this code your problem will rectify

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {MainComponent} from './main/main.component';
import {Test1Component} from './test1/test1.component';
import {Test2Component} from './test2/test2.component';
import {Test3Component} from './test3/test3.component';
import {Test4Component} from './test4/test4.component';


const routes: Routes = [
  {path:'',redirectTo:'main', pathMatch:'full'},
  {
    path:'main', component:MainComponent,
    children: [
      { path:'',redirectTo:'Test1',pathMatch:'full'},
      { path:'Test1',component:Test1Component },
      { path:'Test2',component:Test2Component },
      { path:'Test3',component:Test3Component },
      { path:'Test4',component:Test4Component },
    ]
  },
];

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

<div align="center">
    <nav>
        <div class="ui-g">
            <div class="ui-g-3" style="float:left; width:13%;">
                <div>
                    <a routerLink="Test1" routerLinkActive="active">Test1</a>
                </div>
            </div>
            <div class="ui-g-3" style="float:left; width:13%;">
                <div>
                    <a routerLink="Test2">Test2</a>
                </div>
            </div>
            <div class="ui-g-3" style="float:left; width:10%;">
                <div>
                    <a routerLink="Test3">Test3</a>
                </div>
            </div>
            <div class="ui-g-3" style="float:left; width:10%;">
                <div>
                    <a routerLink="Test4">Test4</a>
                </div>
            </div>
        </div>
    </nav>
</div>
    <router-outlet></router-outlet>

I'm not getting any error and when I inspect I can see the component added to the DOM but it's not getting displayed. When I hover over the component in debugger then it highlights on extreme right of browser but nothing is displayed. — Sunil Ojha, Jul 26 '19 at 12:10

Child Route not displaying correctly in angular

2 Answers2