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?
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
And your app-root