Using a component selector into other component in Angular 4

Question

I need to add Slider Component to the Home Page Component.

The Slider Component is

slider.component.ts

 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() { } } 

slider.component.html

 <div class="container-image-slider"> <img id="img1"> <img id="img2"> <img id="img3"> </div> 

The Home Component home.component.ts

 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() { } } 

home.component.html

<app-slider></app-slider>

The issue here is it gives error

 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 ->]<app-slider></app-slider>"): 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 (<anonymous>) at JitCompiler._compileComponents (compiler.js:34497) at eval (compiler.js:34367) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34366) 

Answer 1

You have to import the component in your app.module.ts:

import { AppSliderComponent } from 'pathToComponent';

@NgModule({
    declarations: [
        AppComponent,
        AppSliderComponent
]

Answer 2

please import this component on app.module.ts file Expample:- import { SliderComponent } from './SliderComponent .component'; and add SlinderCompoent in decalartion prpery array Example declarations: [ SlinderCompoent ]