My app.component is not rendering child component template but after inspecting on the webpage I can see customer-form.component but it's not rendering. I have added my files for all the components.

app.component.html=

<h1>Customer services</h1> <app-customer-form></app-customer-form> 

app.module.ts=

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomDirectDirective } from './custom-direct.directive';
import { CustomerFormComponent } from './customer-form/customer-form.component';
import { DisplayCustomerComponent } from './display-customer/display-customer.component';

@NgModule({
  declarations: [
    AppComponent,
    CustomDirectDirective,
    CustomerFormComponent,
    DisplayCustomerComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

customer-form.component.html=

<h2>this is customer form</h2>

customer-form.component.ts=

import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';

@Component({
  selector: 'app-customer-form',
  templateUrl: './customer-form.component.html',
  styleUrls: ['./customer-form.component.css']
})
export class CustomerFormComponent implements OnInit {
  

  constructor(public customer: Customer) { }

  ngOnInit(): void {
    
  }


  customerForm(data: any){
    
  }

}

It shows child component while inspecting but doesn't render on page.

Inspect element Image

CodePudding user response：

Make the child fit the container using CSS. i think the child height and width are 0*0

CodePudding user response：

It seems like a styling issue.

• Make sure your template URL must match your Html file path.

If you still facing issues. Then you have to add your project to any live resource then we can help you.