How to route to a new screen without sidebar and top navbar

[srinath.d...@gmail.com]

I am new to Angular.

I have to create a dashboard webpage with a top navbar and also a  sidebar.  I have to remove my sidebar and navbar when I click the child link and show the new page, which is an accordion form,  in a complete new screen without any navbars.

Could some one please tell me how to go about this? I tried to do it with paths set up in the child module but it wasn't working. 

app-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>

         

Nothing shows up in the next page when I click on 'Inprogress' or 'Completed' or 'Directory'.

How do I display the whole screen when I click on any of those links.

Any links to similar examples would help too.

Thanks!

[srinath.d...@gmail.com]