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)

You've to declare the component in the AppModule.

Niral Munjariya
– Niral Munjariya

2018-02-16 09:34:56 +00:00
Commented Feb 16, 2018 at 9:34 — Niral Munjariya
– Niral Munjariya, Commented Feb 16, 2018 at 9:34

Juan · Accepted Answer · 2018-02-16 09:36:46Z

6

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

import { AppSliderComponent } from 'pathToComponent';

@NgModule({
    declarations: [
        AppComponent,
        AppSliderComponent
]

answered Feb 16, 2018 at 9:36

Juan

2,0743 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Crunch · Accepted Answer · 2018-02-16 09:52:04Z

0

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 ]

answered Feb 16, 2018 at 9:52

Crunch

73 bronze badges

Collectives™ on Stack Overflow

Using a component selector into other component in Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related