Child component HTML is not rendering while is in the DOM - html

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>

Answer 1

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