title: Angular 6 Router navigation not rendering child component in the destination component
body: <p>I have an Angular 6 application with a login component and a dashboard component.
  Am trying to navigate to DashboardComponent on the login button click event.
  DashboardComponent contains a child component called  WardComponent .
  But while navigating the to the dashboard it render only the contents other than the child component ward.How can i render the dashboard component with child component it it after the login ?</p>
  
  <p>Please see my component classes below</p>
  
  <p>AppComponent</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>LoginComponent.ts</p>
  
  <pre><code>  export class LoginComponent {
    constructor(private router: Router) {}
  
    login() {
      this.router.navigate(["/dashboard/"]);
    }
  }
  </code></pre>
  
  <p>DashboardComponent</p>
  
  <pre><code>import { Component } from "@angular/core";
  @Component({
    selector: "dashboard",
    template: `
      haii u r in dashboard compo
  
      &lt;div class="form-inline" style="padding: 40px;"&gt;
        &lt;ward *ngFor="let ward of wards" [wardNumber]="ward"&gt;&lt;/ward&gt;
      &lt;/div&gt;
    `
  })
  export class DashboardComponent {
    constructor() {}
  }
  </code></pre>
  
  <p>WardComponent.ts</p>
  
  <pre><code>import { Component, Input } from "@angular/core";
  @Component({
    selector: "ward",
    template: `
      &lt;div class="card bg-light mb-3" style="max-width: 18rem;"&gt;
        &lt;div class="card-header"&gt;&lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;h2 class="card-title"&gt;{{ wardNumber + 1 }}&lt;/h2&gt;
          &lt;button class="btn btn-primary" (click)="checkIn()"&gt;check in&lt;/button&gt;
          &lt;button class="btn btn-primary" (click)="checkOut()"&gt;check Out&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `
  })
  export class WardComponent {
    @Input() wardNumber: Number;
    checkedIn: boolean = false;
    constructor() {}
  
    checkIn() {
      console.log("checked in");
      this.checkedIn = true;
    }
  
    checkOut() {}
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>  const indexRoutes: Route = {
    path: "",
    component: DashboardComponent
  };
  // for all invalid routers , it will redirect to login component
  const fallbackRoutes = {
    path: "**",
    component: LoginComponent
  };
  
  const routes: Routes = [
    indexRoutes,
  
    {
      path: "dashboard",
      component: DashboardComponent
    },
  
    {
      path: "ward",
      component: WardComponent
    },
  
    fallbackRoutes
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      WardComponent,
      LoginComponent,
      DashboardComponent
    ],
    imports: [BrowserModule, RouterModule.forRoot(routes)],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>