title: Routing for components on same page in angular doesn't work
body: <p>I have a very common angular website design in which I have placed components in vertical way and wants to navigate through menu. For example, if I click on Contact link my focus should go to contact us component at the end of the page. But its not navigating. </p>
  
  <pre><code>&lt;div fxLayout="column"&gt;
            &lt;a mat-button routerLink="/aboutus"&gt;About&lt;/a&gt;
            &lt;a mat-button routerLink="/packages"&gt;Packages&lt;/a&gt;
            &lt;a mat-button routerLink="/contact"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
   &lt;div class="compList"&gt;
               &lt;app-about&gt;&lt;/app-about&gt;
               &lt;hr&gt;
               &lt;app-packages&gt;&lt;/app-packages&gt;
               &lt;hr&gt;
               &lt;app-outzone-package&gt;&lt;/app-outzone-package&gt;
               &lt;hr&gt;
               &lt;app-contact-us&gt;&lt;/app-contact-us&gt; 
               &lt;app-footer&gt;&lt;/app-footer&gt; 
          &lt;/div&gt;
     &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>This is how I have placed my components in app.component.</p>
  
  <p>I expect that when I click on any of the routerlink, it takes the focus to that component. </p>
  
  <p>Without giving any error it doesn't move at all. I wonder if i need to make modules instead of components??</p>