title: Child Route not displaying correctly in angular
body: <p>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:</p>
  
  <pre><code>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
    ]
  })
  </code></pre>
  
  <p>parent-stepper.html</p>
  
  <pre><code>&lt;mat-horizontal-stepper #stepper [linear]="true"&gt;
     &lt;mat-step *ngFor = "let step of steps; let i=index" [editable]="true"&gt;
       &lt;button type="button" mat-raised-button (click) = "load()"&gt;Add Sub Item&lt;/button&gt;
         &lt;router-outlet&gt;&lt;/router-outlet&gt;
     &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  
  </code></pre>
  
  <p>parent-stepper.component.ts</p>
  
  <pre><code>load(){
     this._route.navigate(['subitem'], {relativeTo: this._ac});
  }
  
  </code></pre>
  
  <p>If someone can suggest what I'm doing wrong here?</p>
  
  <p>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.</p>