Angular 2 More than one component on same page

Question

I am working from the Angular 2 quick start code on app.component.ts file.

The file looks like this:

import {Component} from \'angular2/core\';

@Com         


        

Answer 1

You can't have two root components with the same selector in your page, you also can't have two @Component() decorators on the same class.

If your components have different selectors, just run bootstrap for each root component

@Component({
    selector: 'app',
    template: '<h1>AppComponent1</h1>'
})
export class AppComponent1 { }

@Component({
    selector: 'appTwo',
    template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 { }


bootstrap(AppComponent1)
bootstrap(AppComponent2)

There is an open issue to support overriding the selector to be able to add a root component multiple times
- https://github.com/angular/angular/issues/915

Answer 2

Incase this is helpful to anyone, could do the same thing with iFrames. Made a sample you can see here: http://plnkr.co/edit/xWKGS6

Basically i use iframes to load a widget html

<iframe src="widget.html" width="500" height="400" style="border:none; background-color:#ccc">
  </iframe>

The widget is a normal angular2 html page

Answer 3

You can't have a component with two component decorators (@Component). You need to create two different classes for this:

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>`
})
export class AppComponent { }

@Component({
    selector: 'appTwo',
    template: `<h1>Another Title Here</h1>`
})
export class AppComponent1 { }

Then you can use the approach from the Gunter's answer...