I'm trying to display a child ponent, but the output is a blank screen. Even title is not showing. I am new to angular please help.

appponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent {
  title = 'app';
}

Child Component

import {Component} from '@angular/core';

@Component({
  selector: 'app-test',
  template: '<h1>Haa</h1>',

})
export class CAppComponent {

}

app.module.ts

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

import { AppComponent } from './appponent';
import { CAppComponent } from './child/childponent';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, CAppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

appponent.html

<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
  <h1>
    Wele to {{title}}!!
  </h1>
  <app-test></app-test>
</div>

I'm trying to display a child ponent, but the output is a blank screen. Even title is not showing. I am new to angular please help.

app.ponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {
  title = 'app';
}

Child Component

import {Component} from '@angular/core';

@Component({
  selector: 'app-test',
  template: '<h1>Haa</h1>',

})
export class CAppComponent {

}

app.module.ts

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

import { AppComponent } from './app.ponent';
import { CAppComponent } from './child/child.ponent';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, CAppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.ponent.html

<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
  <h1>
    Wele to {{title}}!!
  </h1>
  <app-test></app-test>
</div>

• javascript
• angular
• typescript

1 Answer 1

You need to register your ponent in declarations:

@NgModule({
  declarations: [
    AppComponent, CAppComponent  <--------------
  ],
  imports: [
    BrowserModule, 

not imports.

Imports is used to import other modules that export ponents, like CommonModule.