CODEWITHSUNDEEP
htmlangulartypescriptangular7
ahsan
ahsan

Reputation: 297

Child component HTML is not rendering while is in the DOM

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>

Upvotes: 1

Views: 1673

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222720

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

Upvotes: 2

Related Questions