Komponent's templateurl nicht Rendern

Question

Ich bin neu in eckigen 2. Ich hatte versucht, eine Komponente mit dem Namen "Header" in dem ich zwei Dateien namens "Header.component.ts" & "Header.component.html" platziert hatte. auch in app.module.ts Dateien konfiguriert ist, wie wie folgt:

import { AppComponent } from './app.component'; 
import {HeaderComponent} from './Header/Header.component'; 


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

Und mein Header.component.ts sieht aus, als wie unten:

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

@Component({ 
    selector : 'app-header', 
    templateUrl: './Header.component.html' 

}) 
export class HeaderComponent{ 
     HeaderName = 'Its Header'; 
    } 

Und mein Header.comonent.html ist wie folgt: `

<h1> 
    Header.. {{HeaderName}} 
    </h1> 

Und mein Index.HTML sieht aus wie folgt:

<app-header> 
</app-header> 

<app-root> 
</app-root> 

Im Browser kann ich den Standard-App-Root-Selektor korrekt anzeigen. wo ich als derjenige, den ich erstellt habe, nicht rendern kann.

Meine Ordnerstruktur sieht aus wie unten Bild:

diese

<app-header></app-header> 

Answer 1

In index.html Sie <app-root></app-root>

innerhalb app-root-Vorlage haben soll.
Header.component.ts

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

@Component({ 
    selector : 'app-header', 
    templateUrl: './Header.component.html' 

}) 
export class HeaderComponent{ 
    public HeaderName = 'Its Header'; //define as public 
} 

Answer 2

Versuchen: enter image description here