Repeating root tag in index.html

Question

Why does repeating <app-root> tag in my index.html have no effect? For example, if my app.component.html has a simple Hello World and if I write

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

in index.html, the browser displays only one Hello World and not

Hello World
Hello World
Hello World

Answer 1

That's because angular selects root element through:

document.querySelector(selectorOrNode)

where selectorOrNode is the root component selector.

As you can guess it will always return only first element.

If you want to apply root component to several elements then you can use ngDoBootstrap as described here:

• Is it possible to run one Angular 2 app several times in one page?