Why the content is not displaying when ng-content is used?-CodePudding

We know that the app-root component selector is used in the index.html file. So I placed some content between the selector. So to access the content I used ng-content inside the app-root HTML file. but the content is not displayed in the browser. It shows some strange behavior

index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>
    <h1>Hello this is from app-root</h1>
  </app-root>
</body>
</html>

app.component.html:

<ng-content></ng-content>

I am expecting <h1> content should be displayed on the browser, but it is not happening why?

CodePudding user response：

Remove <ng-content></ng-content> from app.component.html and content should be displayed on the browser.

CodePudding user response：

Check this SO about structure of index.html in an angular project.

So the "tag" in index.html (and what-ever inside) are always replace by the component.

You need to have a component app-home

  <ng-content></ng-content>

And your app-root

<app-home>
    <h1>Hello this is from app-root</h1>
</app-home>