Understanding Top level and sub module

Question

I am new to Angular framework and creating an angular application. And I have a layout(Header, Body , Footer) where Header and footer should be fixed and they are placed in app.component.html. Only the body needs to be changed based on the click or navigation. So but right now, I am struck with one issue.

App.component.html

 <app-header></app-header>
 <router-outlet></router-outlet>
 <!-- Footer Selector-->
 <app-footer></app-footer>

dashboard component

  <div class="container-fluid">
      <div class="container-fluid">
         <span class="badge badge-secondary">Badge 1</span>
      </div>
      <div class="container-fluid">
         <span class="badge badge-secondary" (click)="navigateToBadge2()">Badge 2</span>
      </div>
      <div class="container-fluid">
          <span class="badge badge-secondary">Badge 3</span>
      </div>
      <div class="container-fluid">
          <span class="badge badge-secondary">Badge 4</span>
      </div>
 </div>
 <router-outlet>
 </router-outlet>

Dashboard TS

navigateToBadge2() {
    this.router.navigate(['/dashboard/badge2']);
  }

Whenever I am clicking the badge, it's navigating properly but the badges are still being displayed. I wanted to navigate only to badge component without displaying the Dashboard screen. Below is the result. I have my header and footer fixed but, the badges are being displayed even if the navigation successful. If I remove the from Dashboard component. Unable to see the badge content. Could anyone help me with the scenario. Thanks in advance

routing module

   { path: 'dashboard', component: DashboardComponent, children:
    [
      { path: 'badge1', component: Badge1Component },
      { path: 'badge2', component: Badge2Component },
      { path: 'badge3', component: Badge3Component }]}

look through this you may get what you need https://stackoverflow.com/questions/29038596/bootstrap-fixed-header-and-footer-with-scrolling-body-content-area-in-fluid-cont — harsha reddy, Sep 18 '19 at 10:08
you still see your badges cause they are in the dashboard component OUTSIDE the router-outlet (where the badge componentg children will be injected) .. — federico scamuzzi, Sep 18 '19 at 10:24
check this: https://stackoverflow.com/questions/41857876/angular-2-submodule-routing-and-nested-router-outlet — porgo, Sep 18 '19 at 10:25
@federicoscamuzzi. But how do I not display the badges also upon navigating to individual badges — Vijay, Sep 18 '19 at 10:30
create ANOTHER COMPONENT .. like indexCompoenent .. put there your badges and andd it as child route ..then set initial route (default) ton your /dashboard/index — federico scamuzzi, Sep 18 '19 at 10:58
It's a bit confusing though. Can yu give an example and explan — Vijay, Sep 18 '19 at 11:07

score 1 · Answer 1 · answered Sep 18 '19 at 14:15

When you access a sub-route it does not leave the parent one. It'll only include a new child route inside the parent one. In your case, you always will be inside "dashboard" route and changing sub-routes will only redraw the sub-route area (the inner router-outlet).

If your desire is to have a route without your badge menu, I believe your best approach would be to create a route in the same level of "dashboard" (using the first router-outlet). Thus, you would navigate using this.router.navigate(['/badge2']);

Understanding Top level and sub module

1 Answers1