can i add component selectors in index.html in angular2

Question

I made a header component in order to keep my header consistent throughout the website so that I dont have to write the header code repeatedly. On placing the selector in the index.html file, I couldn't see the result. Please tell the correct way to do that

index.html file

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>stuff</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-header></app-header>
    <app-root></app-root>


</body>

</html>

i just have a paragraph tag saying 'header works' in my headerComponent and it is all generated by angular-cli, no modifications made.

Gourishankar · Accepted Answer · 2017-07-13 12:18:43Z

2

Put it in the app.component.html above <router-outlet> </router-outlet> tag as:-

<div> <app-header></app-header> </div> <router-outlet> </router-outlet>

edited Jul 13, 2017 at 12:18

answered Jul 13, 2017 at 12:15

Gourishankar

9561 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amaan Kulshreshtha Over a year ago

can't it be used in index.html directly?

Gourishankar Over a year ago

I guess No because at the time index.html is rendered it has no information about <app-header> as <app-root> is the starting point of the application.

Gourishankar Over a year ago

this will solve the purpose i.e. header consistent throughout the website.

Collectives™ on Stack Overflow

can i add component selectors in index.html in angular2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related