Instance Angular 2 Component Two times

Question

I\'m trying to learn Angular 2, so I was making some hello world examples. Here is my code:

boot.ts

import {bootstrap}          


        

Answer 1

Just as standard HTML page should have one tag for content and one tag for 'metadata', an Angular2 application should have one root tag. To make app work you have to initialize it (tell Angular that it is an app) and you do that by calling bootstrap() function.

If it bothers you that your root tag (for example ) is inside the body, you can change selector from custom tag app to standard tag body. If you add different component as root, like this:

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'

@Component({
  selector: 'body',
  directives: [AppComponent],
  template: `
    Loading...
    Loading...
  `
})
class RootComponent {}

bootstrap(RootComponent, [DataService]);

...the rest of your code should work.

Of course, if in your HTML you need to have other stuff (non-app content, or other angular apps) you wouldn't select body as root selector for your Angular2 app.

Hope this helps you understand things better...