title: Separating the header/footer from content with Angular 4
body: <p>I've started learning to use Angular and so far it seems fairly straight forward. I opted to convert one of my existing website themes over to familiarize myself with the process but ran into a question regarding proper usage.</p>
  
  <p>My understanding thus far is that each page is a component. I have my index content in <strong>app.component.html</strong>, and then each sub page is a separate component as well. I would however like to separate the <code>header/footer</code> HTML and include it as I have in the past with PHP.</p>
  
  <p>My question is, should the <code>header/footer</code> be individual components or should they just be singular HTML files, included using <code>ng-include</code>? I realize either would work but can't figure out which is the traditional implementation with Angular developers.</p>
  
  <p>I am trying the following approach but the header/footer component's don't seem to load. They work fine from app.component.html but not from index.html.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;body&gt;
    &lt;app-header&gt;&lt;/app-header&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
    &lt;app-footer&gt;&lt;/app-footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './header/header.component';
  import { FooterComponent } from './footer/footer.component';
  import { ProductComponent } from './product/product.component';
  import { ProductsComponent } from './products/products.component';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      ProductComponent,
      ProductsComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>