title: Using a component selector into other component in Angular 4
body: <p>I need to add Slider Component to the Home Page Component.</p>
  
  <p>The Slider Component is</p>
  
  <p>slider.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrls: ['./slider.component.css']
  })
  export class SliderComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> </code></pre>
  </div>
  </div>
  </p>
  
  <p>slider.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-image-slider"&gt;
           &lt;img id="img1"&gt;
            &lt;img id="img2"&gt;
            &lt;img id="img3"&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Home Component
  home.component.ts
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
   @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.component.html</p>
  
  <pre><code>&lt;app-slider&gt;&lt;/app-slider&gt;
  </code></pre>
  
  <p>The issue here is it gives error</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Uncaught Error: Template parse errors:
  'app-slider' is not a known element:
  1. If 'app-slider' is an Angular component, then verify that it is part of this module.
  2. If 'app-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR -&gt;]&lt;app-slider&gt;&lt;/app-slider&gt;"): ng:///AppModule/HomeComponent.html@0:0
      at syntaxError (compiler.js:485)
      at TemplateParser.parse (compiler.js:24668)
      at JitCompiler._parseTemplate (compiler.js:34621)
      at JitCompiler._compileTemplate (compiler.js:34596)
      at eval (compiler.js:34497)
      at Set.forEach (&lt;anonymous&gt;)
      at JitCompiler._compileComponents (compiler.js:34497)
      at eval (compiler.js:34367)
      at Object.then (compiler.js:474)
      at JitCompiler._compileModuleAndComponents (compiler.js:34366)</code></pre>
  </div>
  </div>
  </p>