angular


Bootstrap the same angular2 module multiple times in a page


I have a web forms application which loads User controls dynamically onto a page based on configurations (Just like a CMS with re-usable widgets). I would like to implement one of the user control/widget using an Angular2 component.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Ng2Widget.ascx.cs" Inherits="Namespace.Ng2Widget" %>
<div>
<app-root inputValue="<%= settingsValue %>"></app-root>
</div>
"settingsValue " will be a server side variable with some value which the server wants to pass on to the component.
So if the admin configures the page with multiple widgets of this newly implemented widget, the rendered page will have multiple Angular2 components of same type.
The rendered page will basically have
<div>
<app-root inputValue="settingsValue1"></app-root>
</div>
<!-- Some other widgets -->
<div>
<app-root inputValue="settingsValue2"></app-root>
</div>
Inorder to pass values into the root component, I used the method mentioned in this post.
Angular 2 input parameters on root directive
At the bottom of the page I have placed the js files which bootstraps the module to .
<script type="text/javascript" src="ng2/dist/inline.bundle.js"></script>
<script type="text/javascript" src="ng2/dist/styles.bundle.js"></script>
<script type="text/javascript" src="ng2/dist/main.bundle.js"></script>
Once the page is loaded, Angular bootstraps the module only to the first instance of tag and completely ignores the second.
All the examples I find on the net, is trying to bootstrap multiple modules of different module types, which seems to work fine.
In Angular1, the root app was scoped to a dom element, and any dom element with that decorated with the ng-controller attribute loaded the components in their respective places.
In the earlier version of Angular2, we were able to bootstrap a component. But with the introduction of NgModule, a module is being bootstrapped. But even then I dont think the same component can be bootstrapped to multiple instances.(ie. All the instances of tag, renders the component.)
I saw the discussion regarding the same at
https://www.reddit.com/r/Angular2/comments/424nwn/using_angular_2_without_it_being_a_single_page_app/
I feel this is relevant wherever a legacy server side driven app is trying to make use of client side frameworks like Angular2. I was able to make use of React components pretty easily since they are rendered and attached to a dom element at run time with a simple render method call.
Is there any way/workaround in which I can bootstrap multiple instances of the same module in a page? ie. Load the components in all the occurrences of the tags.
I have exactly the same problem, after digging the web, I finally found the solution in this plnkr:
https://plnkr.co/edit/I6kxKa78Np73sIWbbYHz?p=preview
The magic part lies in the ngDoBootstrap function:
ngDoBootstrap(appRef : ApplicationRef) {
this.components.forEach((componentDef : {type: Type<any>, selector: string}) => {
const factory = this.resolver.resolveComponentFactory(componentDef.type);
factory.selector = componentDef.selector;
appRef.bootstrap(factory);
});
}
Idea is to inject your list of component instances in the wrapper module and to bootstrap every component retreived by the ComponentFactoryResolver.
Hope this help.

Related Links

How to get meta tags work correctly in angular 2? [closed]
Angular2-highcharts switching option
How to make ViewChild work in a unit test
Angular 2 AOT: Getting lot of errors in index.d.ts
Angular2 doesn't work Custom Reuse Strategy with Lazy module loading
view not updated while changing class variable value angular2
Using Angular 2, how can I allow robots.txt to be viewed without angular routing being triggered?
Angular2 Google sign
Angular2 : Async Pipe and conditional styling. How to refactor my code?
Angular 2 attribute directive to clear textbox?
How to get asynchronous data from one Angular component to another
Looping using ngFor and skip nth element
How to populate a dropdown list default value from API in Angular2 Model based form
Async pipe where no element
How to trigger PrimeNG Accordion Click programmatically in Angular 2.0?
how to use file system (fs) in angular 2

Categories

HOME
machine-learning
gradle
loadrunner
slickgrid
drawing
dropbox-api
screensaver
unix
monitoring
umbraco7
datatable
axis2
datagrid
ios8
sorm
apigee
logstash-grok
kafka-consumer-api
beatbox
eventtrigger
mitmproxy
multiline
ssrs-2016
osx-elcapitan
fork
apl
rubinius
hibernate-criteria
z80
biblatex
fxml
sqlcedatareader
puma
state
nn
uicollectionviewcell
regedit
webex
watchdog
ansible-vault
oclazyload
singleton-type
roc
google-truth
cics
javassist
leap-motion
helium
pandorabots
deferred-loading
google-plus-domains
servant
zend-studio
listboxitem
traceroute
datamapper
johnny-five
youtube-javascript-api
supercsv
offsetheight
foundation
ms-query
streaminsight
tap
microsoft.mshtml
resin
like
jquery-dynatree
google-plugin-eclipse
stacked-area-chart
ntl
sine-wave
httpwatch
intel-galileo
google-playground
println
interlacing
mindmap
angularjs-e2e
panning
vp8
customvalidator
bionic
flotr
crashrpt
cocos2d-python
django-generic-views
google-instant-previews
xcode4.1
set-include-path
validationsummary
dynamic-css
application-design
nice

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App