CODEWITHSUNDEEP
angular
ebakunin
ebakunin

Reputation: 3791

Angular 2: how to load separate, unrelated components on to a page

I have two completely unrelated components on a page. I do not want to load them as subcomponents under a parent template. How would I load both of them on a single page?

<section>
<h1>Heading</h1>
<the-first-component></the-first-component>
</section>

(lots of html)

<main>
<h1>Another heading</h1>
<the-second-component></the-second-component>
</main>

(lot more html)

Upvotes: 1

Views: 427

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

Just call bootstrap for each component

bootstrap(AppComponent1, [ /* providers here */]);
bootstrap(AppComponent2, [ /* providers here */]);

if you want to share data you can use a shared service for example

@Injectable()
class MySharedService {
}

var shared = new MySharedService();

bootstrap(AppComponent1, [provide(MySharedService, {useValue: shared}]);
bootstrap(AppComponent2, [provide(MySharedService, {useValue: shared}]);

This way when a AppComponentx or one of their sub-components or another service has a constructor parameter like

constructor(private myShared: MySharedService) {}

then you have the same global instance available everywhere to be able to easily communicate between the different Angular2 "applications" on your page. See also detect change of nested property for component input

Upvotes: 4

Related Questions