title: Using child component in parent in Angular 2
body: <p>I have the following 3 level nested components in my Angular2 Application.
  (layout/header/search)</p>
  
  <pre><code>layout/
  ├── header/
  │     ├── search/
  │     │     ├── search.component.ts
  │     │     └── search.component.html
  │     ├── header.component.ts
  │     └── header.component.ts
  ├── layout.component.ts
  ├── layout.component.html
  ├── layout.component.css
  └── layout.module.ts
  </code></pre>
  
  <p>I'm trying to call the search component inside my <code>header.component.html</code> but ending with a console error saying </p>
  
  <pre><code>'Error: Uncaught (in promise): Error: Template parse errors:
  'app-search' is not a known element:'
  ...
  </code></pre>
  
  <p><strong>layout.module.ts</strong></p>
  
  <pre><code>import { CommonModule } from "@angular/common";
  import { NgModule } from "@angular/core";
  import { layoutRouting } from "./layout.routing";
  
  import { LayoutComponent } from "./layout.component";
  import { HeaderComponent } from './header/header.component';
  
  @NgModule ({
      declarations: [
          LayoutComponent,
          HeaderComponent
      ],
      imports: [
          CommonModule,
          layoutRouting
      ]
  })
  
  export class LayoutModule {  }
  </code></pre>
  
  <p><strong>layout.component.html</strong></p>
  
  <pre><code>&lt;div class="layout"&gt;
     &lt;app-header&gt;&lt;/app-header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>header.module.ts</strong></p>
  
  <pre><code>import { CommonModule } from "@angular/common";
  import { NgModule } from "@angular/core";
  
  import { HeaderComponent } from "./header.component";
  import { SearchComponent } from './search/search.component';
  
  @NgModule ({
      declarations: [
          HeaderComponent,
          SearchComponent
      ],
      imports: [
          CommonModule
      ]
  })
  
  export class HeaderModule {  }
  </code></pre>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;header class="header"&gt;
     &lt;app-search&gt;&lt;/app-search&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>As you can see above, I have already imported the <code>SearchComponent</code> and and declared at <code>@NgModule</code></p>
  
  <p>If I import the <code>SearchComponent</code> in <code>layout.module.ts</code> (which is the parent component of both children), it works as expected without any errors.</p>
  
  <p>I'm generating component using Angular CLI</p>
  
  <p>e.g:  <code>ng g c layout/home/search</code></p>
  
  <p>What I'm doing wrong here? How can i use the search component in header without calling in layout? Please help me.</p>