title: How to keep partial templates in separate page and switch according to child page
body: <p>In my app, I have a <code>home</code> page. this home page has 2 child as <code>service</code> and <code>contact</code>. now the home page have common header. ( it requires other child pages too ) and when child page loads i require to load the partial header template to their own.</p>
  
  <p>And also, I require to maintain the child page headers in separate hbs too.
  How to achieve this?</p>
  
  <p>here is my try :</p>
  
  <pre><code>&lt;header&gt;
      &lt;h2&gt;Home page header &lt;/h2&gt;
    &lt;p class="service"&gt;Partial content for Service to be maintained in separate hbs file &lt;/p&gt;
      &lt;p class="contact"&gt;Partial content for contact to be maintained in separate page &lt;/p&gt;
  &lt;/header&gt;
  
  {{outlet}}
  </code></pre>
  
  <p><a href="https://ember-twiddle.com/9a926b7ecd5a7953e53c98d1201996f4?openFiles=templates.home.hbs%2C&amp;route=%2Fhome%2Fservice" rel="nofollow noreferrer">Twiddle here</a></p>