How to render multiple angular2 components in one page?

Question

I am working on this project in which I have to load multiple components in one page. my directory structure is like this:

I have created few components in angular2 previously. I can render all components one by one if I change the component in main.ts Following are the contents of main.ts 1.main.ts

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Component1} from './Component1/Component1.component'
import {Component2} from './Component2/Component2.component'
import {Component3} from './Component3/Component3.component'
import {Component4} from './Component4/Component4.component'
import {Component5} from './Component5/Component5.component'

bootstrap(Component5,[
  HTTP_PROVIDERS,
]);

2.index.html

<html>

<head>
    <title>Angular 2 TypeScript App</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="iCETS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="node_modules\bootstrap\dist\css\bootstrap.min.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->

<body>
    <component_5>Loading...</component_5> //it works
    //what i want to achieve
    <component_1>Loading...</component_1>
    <component_2>Loading...</component_2>
    <component_3>Loading...</component_3>
    <component_4>Loading...</component_4>
</body>

</html>

is there any way that I can render all these components in one page?

Thierry Templier · Accepted Answer · 2016-02-09 12:41:25Z

2

To do that, you need to bootstrap each component, as described below:

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Component1} from './Component1/Component1.component'
import {Component2} from './Component2/Component2.component'
import {Component3} from './Component3/Component3.component'
import {Component4} from './Component4/Component4.component'
import {Component5} from './Component5/Component5.component'

bootstrap(Component1,[ ... ]);
(...)
bootstrap(Component5,[
  HTTP_PROVIDERS,
]);

See this link: https://angular.io/docs/ts/latest/api/platform/browser/bootstrap-function.html, section "Bootstrapping Multiple Applications".

edited Feb 9, 2016 at 12:41

answered Feb 9, 2016 at 12:39

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

3 Comments

Bhushan Gadekar Over a year ago

I know that.but my requirement is to display all those components in one page who uses those component tags.is that possible?

Thierry Templier Over a year ago

With multiple bootstaps, you will create several applications into your HTML entry page. This way, you will be able to use HTML elements component_* into the body element of this page...

Christian Kuetbach Over a year ago

Take a look at this post: blog.sstorie.com/…

Collectives™ on Stack Overflow

How to render multiple angular2 components in one page?

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