Child component HTML is not rendering while is in the DOM

Question

I have create a general search component and declare in CoreModule and imported the module in the CoreModule.

Now, when I'm using the general search component its HTML is not rendering in the DOM but when inspect element in the browser, selector of the component is on the same place but not having its inner HTML.

Search Component HTML:

<div>
<a class="header-link search-link">
    <i class="fa fa-search icon text-white" aria-hidden="true"></i>
    <p class="site-header-text text-white">Search</p>
</a>
<div class="onclick-search-div mb-3 position-relative" style="display:none;">
    <input type="text" class="referling-search" placeholder="ClassPass .etc" aria-describedby="basic-addon2">
    <i class="fa fa-search search-icon position-absolute" aria-hidden="true"></i>
    <div class="searched-items">
        <ul class="bgWhite">
            <li></li>
        </ul>
    </div>
</div>

Search Component TS:

import { Component } from "@angular/core";
@Component({
  selector: 'app-header-search-bar',
  templateUrl: './header-search-bar.html',
  styleUrls:['./header-search-bar.css']
})
export class HeaderSearchBarComponent {
   constructor() {}
}

CoreModule:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderSearchBarComponent } from "./components/header-search- 
bar/header-search-bar";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        HomeHeaderComponent
    ]
 })
 export class CoreModule {}

AppModule:

import { NgModule } from "@angular/core";
import { CommonModule } from"@angular/common";
import { HomeComponent } from "./components/home/home.component";
import { CoreModule } from './core/core.module';

@NgModule({
    imports: [
        CommonModule,
        CoreModule 
    ],
    declarations: [
        HomeComponent
    ]
})
export class CoreModule {}

HomeComponent.html:

<app-header-search-bar></app-header-search-bar>

I believe you need to also put it in exports of CoreModule. Also, what's HomeHeaderComponent? — Phix
– Phix, Commented Oct 29, 2019 at 20:57

Sajeetharan · Accepted Answer · 2019-10-29 20:57:32Z

2

You need to export the HomeHeaderComponent in order to use it in the AppModule,

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderSearchBarComponent } from "./components/header-search- 
bar/header-search-bar";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        HomeHeaderComponent
    ]
    exports : [
        HomeHeaderComponent
    ]
 })
 export class CoreModule {}

answered Oct 29, 2019 at 20:57

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Child component HTML is not rendering while is in the DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related