Как перейти на новый экран без боковой панели и верхней панели навигации

Question

Я новичок в Angular. Я должен создать веб-страницу панели инструментов с верхней панелью навигации и боковой панелью. Я должен удалить свою боковую панель и панель навигации, когда я нажимаю дочернюю ссылку и показываю новую страницу, которая является формой аккордеона, в совершенно новом экране без каких-либо панелей навигации. Может кто-нибудь сказать, пожалуйста, как это сделать? Я пытался сделать это с помощью путей, установленных в дочернем модуле, но это не сработало.

приложение-routing.module.ts

   /**
 * New typescript file
 */

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {NotificationformComponent} from './notificationform/notificationform.component';


const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  // {path: 'nform', loadChildren: 'app/notificationform/notificationform.module#NotificationFormModule'},
  // {path: 'nform', component: NotificationformComponent}
  //  { path: 'detail/:id', component: HeroDetailComponent },
  //  { path: 'heroes',     component: HeroesComponent }
];

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

import {NgModule} from '@angular/core';
import {FormsListCompletedComponent} from './forms-list-completed.component';
import {FormsListInprogressComponent} from './forms-list-inprogress.component';
import {FormsListCompleteComponent} from './forms-list-complete.component';
import {RouterModule} from '@angular/router';
import {FormsListHomeComponent} from './forms-list-home.component';


@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: FormsListHomeComponent,
        children: [
          {
            path: 'complete',
            component: FormsListCompleteComponent,
            outlet: 'homeRouter'
          },
          {
            path: 'inprogress',
            component: FormsListInprogressComponent,
            outlet: 'homeRouter'
          },
          {
            path: 'completed',
            component: FormsListCompletedComponent,
            outlet: 'homeRouter'
          }
        ]
      },
    ])
  ],
  declarations: [
    FormsListCompletedComponent,
    FormsListInprogressComponent,
    FormsListCompleteComponent,
    FormsListHomeComponent
  ],
  providers: []
})

export class HomeModule {
}

home.component.html

    <div >
    <p>Welcome</p>

      <div class="row row-offcanvas row-offcanvas-left">

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <ul class="nav">
            <li><a [routerLink]="[{outlets: {homeRouter: ['inprogress']}}]">In Progress</a></li>
            <li><a (click)="displayLinks('complete')">Directory</a></li>
            <li><a (click)="displayLinks('completed')">Completed</a></li>
          </ul>
        </div>
        <div class="col-xs-12 col-sm-9">
          <router-outlet name="homeRouter"></router-outlet>
        </div>
      </div>
    </div>

app.component.html

---

      <div class="container">
      <div class="wrapper">
        <app-header></app-header>
        <nav role="navigation" class="navbar navbar-default">

          <div class="navbar-collapse">
            <!--<ul class="nav navbar-nav">-->
            <!--&lt;!&ndash;<li><a routerLink='/home' routerLinkActive='active'>Home</a></li>&ndash;&gt;-->
            <!--&lt;!&ndash;<li><a routerLink='/nform' routerLinkActive='active'>Notification&ndash;&gt;-->
            <!--&lt;!&ndash;Form</a></li>&ndash;&gt;-->
            <!--<li>Welcome</li>-->
            <!--</ul>-->
            <ul class="nav navbar-nav">
              <li><a>Welcome</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/logout">Logout</a></li>
            </ul>
          </div>

        </nav>
        <div>
                 <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </div>

На следующей странице ничего не появляется, когда я нажимаю "Inprogress", "Completed" или "Directory". Как отобразить весь экран, когда я нажимаю на любую из этих ссылок.

Любые ссылки на похожие примеры тоже помогут.

Спасибо!