How to load Angular2 root component Dynamically

Question

I have a requirement where I have to load the root component in angular2 dynamically/using setTimeout(). Is is possible and how. e.g.

<body>
 <hello-world>Loading...</hello-world>
</body>

I want the 'hello-world' append after few second of page load. As I can't have custom component in the page load.

A plnkr will be helpful.

antkhnvsk · Accepted Answer · 2016-09-22 11:50:15Z

1

You can add event on index page and listen this event in main.ts angular file.

index.html:

...  
<body>
    <my-app>Loading...</my-app>

    <script>
      setTimeout(function() {
          document.dispatchEvent(new Event('startNgLoad'))
      }, 5000)
    </script>
  </body>
...

main.ts:

document.addEventListener('startNgLoad', () => {
  platform.bootstrapModule(AppModule);
})

answered Sep 22, 2016 at 11:50

antkhnvsk

262 bronze badges

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

2 Comments

raju Over a year ago

I cant have <my-app> tag in the beginning of index.html load. Can I append it dynamically and later do 'startNgLoad' ?

antkhnvsk Over a year ago

Yep, place document.body.appendChild(document.createElement("my-app")) before dispatch event, or before platform.bootstrapModule()

znwz · Accepted Answer · 2016-09-22 12:06:52Z

0

You can load the root module inside the setTimeout in main.ts

setTimeout(function() {
  platformBrowserDynamic().bootstrapModule(AppModule);
},1000)

answered Sep 22, 2016 at 12:06

znwz

1

1 Comment

raju Over a year ago

Is it possible setTimeout => insert('<hello-world>') after 5 seconds of set timeout

Collectives™ on Stack Overflow

How to load Angular2 root component Dynamically

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related