title: Angular 6 Router Repeating HTML
body: <p>I am trying to achieve the following:</p>
  
  <ol>
  <li>I have a <code>mat-toolbar</code> component in <code>app.component.html</code> that displays the main top navbar of the site. Below the toolbar is <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code>.</li>
  <li>When a user navigates to the root at <code>localhost:4200/</code> I want the top navbar to be visible and the all components associated with links in the navbar to be rendered under the top navbar.</li>
  <li>The problem now is that the top navbar is repeated twice when the user navigates to the root. Clicking the links, the repeated navbar is removed and the proper component is rendered under the navbar (which is what I desire without the repeat). </li>
  </ol>
  
  <p>Here is the <code>app.module.ts</code></p>
  
  <pre><code>// initialization and module imports
  const RootRoutes: Routes = [
   {path: "", redirectTo: "root", pathMatch: "full"},
   {path: "root", component: AppComponent, },
   //{path: "home", component: HomeComponent },
   {path: "fiction", component: FictionDisplayComponent },
   {path: "nonfiction", component: NonFictionDisplayComponent},
   {path: 'poetry', component: PoetryDisplayComponent},
   {path: 'journal', component: JournalDisplayComponent},
   {path: 'letters', component: PersonalLetterDisplayComponent},
   {path: 'jokes', component: JokesDisplayComponent}
  ];
  // NgModule declaration
  </code></pre>
  
  <p>Here is how <code>app.component.html</code> is setup:</p>
  
  <pre><code>&lt;div class="pure-g rr-main-wrapper"&gt;
      &lt;div class="pure-u-5-5 home-top-navbar-wrapper"&gt;
          &lt;rr-home-top-navbar&gt;&lt;/rr-home-top-navbar&gt;
      &lt;/div&gt;
  
  &lt;/div&gt; 
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Here is how <code>home-top-navbar.component.html</code> is setup:</p>
  
  <pre><code>&lt;mat-toolbar color="primary" class="home-top-nav"&gt;
    &lt;mat-toolbar-row&gt;
      &lt;img src="./../../assets/imgs/logo2.png" width="200" height="50"&gt;
      &lt;mat-nav-list class="home-top-nav"&gt;
        &lt;mat-list-item *ngFor="let route of navbarRoutes"&gt;
          &lt;a [routerLink]="[route.url]" class="navbar-link"&gt;{{ route.name }}&lt;/a&gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-toolbar-row&gt;
  </code></pre>
  
  <p>Now if you notice that there is commented out path, <code>{path: 'home', component: HomeComponent}</code> where, I tried loading the toolbar separately and have only <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> in <code>app.component.html</code>. However, the problem is when I click a link, the page navigates to the corrected component,<br>
  the top navbar is no longer visible (which is expected since, other components are not repeating the navbar code). </p>
  
  <p>Is there any way to achieve this without repeating the toolbar twice when a user navigates to the root? Can this be done without copy/pasting the navbar on every page for top level components?</p>