Layout file in Angular

The site layout is located in the file src/index.html. It will look something like this:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>title</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></app-root>
</body>
</html>

Everything in this file should be clear to you if you have studied HTML, except for the app-root tag:

<body>
	<app-root></app-root>
</body>

This tag is not part of HTML. This tag is added by Angular itself. The HTML code of the main component will be inserted in the place where this tag is written. We will talk more about this in the next lesson.

Change the title page in the website layout.

Write some text in the body tag. Check that it appears in the browser.

Add header, footer, sidebars and content. Let the app-root tag be placed in the site content.