Q:

Angular4 - Parent child - Masterpage (Header, content, footer) like implementation

There are are some links in header components and when I click on any link.. corresponding data to that link must get display in the other component called app-Content.
but data is displaying only in header component .... not in the content component.
I am trying to achieve something like Master page where we have top navigation bar, content and footer... when clicking on any link in top navigation bar, content of that link should be displayed in the center (which is content component).
I am certainly missing something or the way it is implemented is wrong... please advise.
These are the components I have.
<app-header>
<app-Content>
<app-Footer>
<page-one>
<page-two>

<app-Content>
<H2> Content </H2>
</app-Content>

<app-Footer>
 <H2> Footer </H2>
</app-Footer>

Index.html has reference of 
This is from root.component.html
<div class="panel panel-default">
  <div class="panel-heading"><app-header> </app-header></div>
  <div class="panel-body"><app-Content> </app-Content></div>
  <div class="panel-footer"><app-Footer> </app-Footer></div>
</div>

header.component.html
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
    <nav>
     <a routerLink="/Page1" routerLinkActive="active">Page1</a>
     <a routerLink="/Page2" routerLinkActive="active">Page2</a>
    </nav>
     <router-outlet></router-outlet>
    </ul>
  </div>
</nav>

app-module.ts also has the routing registerd.. so if I click on link Page1 or Page2 - 
Note: Routing works fine... no issues there.

A:

try removing the  from header.component.html and replace it in root.component.html with  

