title: Angular 4 main page (localhost:4200) and routing index of my website
body: <p>my problem is:</p>
  
  <p>in my apps index.html there is:</p>
  
  <pre><code>&lt;app-root&gt;&lt;/app-root&gt;
  </code></pre>
  
  <p>and i have a couple components like:<br>
   1. Header<br>
   2. About<br>
  3. Offer<br>
  4. Projects<br>
  5. Contact<br>
  6.Footer<br></p>
  
  <p>My app.component.html contains:</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>On HeaderComponent there are routerLinks to each component (About, Offer, Projects, Contact)</p>
  
  <p>I wish, on localhost:4200/, display AboutComponent content, and replace it with other when routerLink is clicked. Now my localhost:4200/ is empty, and About page is on localhost:4200/about.</p>
  
  <p>Is it possible to put "index page" on localhost:4200/ and hide it when subpage is triggered (e.g. localhost:4200/contact) ? </p>