title: Header and Footer in Angular 5
body: <p>I am creating my website in angular 5</p>
  
  <p>I have homepage, stores and categories as pages in my site</p>
  
  <p>Initially I decided to keep header and footer as global across the website.</p>
  
  <p>I mean to create a header and footer components and use them as directives</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-homepage&gt;&lt;/app-homepage&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  
  &lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-stores&gt;&lt;/app-stores&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  
  &lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-categories&gt;&lt;/app-categories&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  </code></pre>
  
  <p>I am trying  to use the meta information of the page, like page title, meta-keywords from my database.</p>
  
  <p>For the homepage it is possible.</p>
  
  <p>For stores and categories I am little confused how can I use the page title, meta-keywords.</p>
  
  <p>For example:</p>
  
  <pre><code>`&lt;html&gt;
  &lt;title&gt;{{ homepage.title }}&lt;/title&gt;
  &lt;meta keywords = {{ homepage.meta_keywords }}&gt;
  &lt;/html&gt;`
  </code></pre>
  
  <p>The above is possible for homepage.</p>
  
  <p>But for Stores and Categories it will change according to page.</p>
  
  <p>Need a solution on how I can change the title and meta keywords according to page</p>
  
  <p>Like for stores :</p>
  
  <pre><code>`&lt;html&gt;
  &lt;title&gt;{{ storepage.title }}&lt;/title&gt;
  &lt;meta keywords = {{ storepage.meta_keywords }}&gt;
  &lt;/html&gt;`
  </code></pre>