title: Angular routing to proper page and to proper element
body: <p>I have the main structure in app component.</p>
  
  <pre><code>&lt;body&gt;
  &lt;header&gt;&lt;/header&gt;
  &lt;nav class="navbar"&gt;
    &lt;app-nav&gt;&lt;/app-nav&gt;
  &lt;/nav&gt;
  &lt;section&gt;
  &lt;/section&gt;
  &lt;aside&gt;&lt;/aside&gt;
  &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The about compotent includes the html page.</p>
  
  <pre><code>&lt;article&gt;
    about works!
  &lt;/article&gt;
  </code></pre>
  
  <p>I use routing to put html page from about compotent into section element in app compotent.
  In app.module.</p>
  
  <pre><code>imports: [
      BrowserModule,
      HttpModule,
      RouterModule.forRoot([
        {
          path: 'about',
          component: AboutComponent
        }
      ])
    ],
  </code></pre>
  
  <p>Links in app-nav compotent html page.</p>
  
  <pre><code>    &lt;ul class="topnav"&gt;
        &lt;li *ngFor="let menuItem of menuItems; let index = index"&gt;
          &lt;a [class.active]="index == 0" routerLink="{{ menuItem.link }}"&gt;{{ menuItem.name }}&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Routing works good, but it puts acricle element behind ul element in app-nav component. What should I do to change it to put it into section element?</p>