Angular2 + ng-bootstrap on server side templates

Question

I have Angular2 (2.0.0) with ng-bootstrap on my server side application. All the templates are rendered using php (not angular).

When I any include any ng-bootstrap snippet from server side, it does not work. But if I include them from angular template inside <app-root>...</app-root> then it works.

I basically need to include dropdown, modal, alert... anywhere on the template as direct directive style. How is that possible?

<body>

<h1>Title 1</h1>

<p>This is para...</p>

<app-root></app-root> <!-- any ng-bootstrap directives are accessable inside app-root -->

<!-- I'm not rendered as ng-bootstrap directive, since its not inside app-root -->
<ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>


 <!--script tags are included here for angular2-->

</body>

Well, put it under app-root, otherwise app-root is not you app root anymore. — JB Nizet, Sep 26 '16 at 21:55
How can I put it outside app-root, since 90% application and template is generated from the server. — Basit, Sep 26 '16 at 22:05
I don't understand how the fact that the template is generated by the server prevents it from generating a template where the alert is inside the app-root rather than outside. You'll need to explain that. — JB Nizet, Sep 27 '16 at 05:54

score 0 · Answer 1 · answered Sep 27 '16 at 05:47

0

If you want an Angular2 component as direct child of <body>, you have to bootstrap it. This means you need an NgModule with that component in bootstrap: [NgbAlert] and then call platform.bootstrapModule(NgbAlertModule). This creates a new Angular2 application on your page for each bootstrapped module.

answered Sep 27 '16 at 05:47

Günter Zöchbauer

623,577
216
2,003
1,567

Where should I import `platform.bootstrapModule` from? – Basit Sep 27 '16 at 11:26
What does "inculded inside bootstrap" mean? Can you please edit your question and add the updated code there? – Günter Zöchbauer Sep 27 '16 at 12:30
As the error message says, `Alert` is not a component. You can't bootstrap directives. – Günter Zöchbauer Sep 27 '16 at 13:44
What is `NgbAlert`? – Günter Zöchbauer Sep 27 '16 at 13:48
Sorry, out of ideas. – Günter Zöchbauer Sep 27 '16 at 13:51
Is it possible to bootstrap body tag without replacing pre-template inside? because that might also work, if we just bootstrap complete body – Basit Sep 27 '16 at 13:55
No, if you use `body` as selector the content of `` will be purged. There was already a question today how to bootstrap two components with an answer. Perhaps that helps solve your problem http://stackoverflow.com/questions/39717949/get-bootstraped-component/39721123#39721123 – Günter Zöchbauer Sep 27 '16 at 13:58

Angular2 + ng-bootstrap on server side templates

1 Answers1