angular.dart how to create a custom component programmatically and add to page?

Question

Is it possible to define an angular-dart component and then programmatically create an instance of that component and add it to your web page? I'd hoped there might be something like:

import 'package:web_sandbox/web_sandbox.dart';
import 'package:angular/angular.dart' as ng;

void main() {
  document.body.appendHtml('<web-sandbox-component></web-sandbox-component>');
  var node = document.body.query('web-sandbox-component');
  ng.compile(node);
}

is there away of creating an angular web component programmatically and adding it to the page, maybe like the above pseudo-example, and if so how?

Günter Zöchbauer · Accepted Answer · 2014-04-28 05:50:52Z

3

+200

I don't think this is possible with Angular.

You can add an HTML tag <web-sandbox-component> into the DOM and tell Angular it should process this new HTML and then Angular would instantiate the Angular component for this tag (this is what the question you linked is about).

I don't see this as a limitation. Is there something you would like to do that seems not possible this way?.

EDIT

Your code in main should look like this:

my document looks like

...
<body>
  <div id="mydiv"></div>
  ...
</body>

and I append the <web-sandbox-component> to the div

main() {
  print('main');
  ng.Injector inj = ngaf.applicationFactory().addModule(new MyAppModule()).run();
  var node = dom.querySelector('#mydiv');
  node.append(new dom.Element.html('<web-sandbox-component></web-sandbox-component>', validator: new dom.NodeValidatorBuilder()..allowCustomElement("web-sandbox-component")));
  ng.Compiler compiler = inj.get(ng.Compiler);
  ng.DirectiveMap directiveMap = inj.get(ng.DirectiveMap);
  compiler(node.childNodes, directiveMap)(inj, node.childNodes);
}

edited Apr 28, 2014 at 5:50

answered Apr 20, 2014 at 17:25

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

7 Comments

Daniel Robinson Over a year ago

no, that's basically the same thing, I just didn't fully understand what that other question was about with the extending off NgShadowDomAware

Günter Zöchbauer Over a year ago

implements NgShadowDomAware just tells Angular to call onShadowRoot when the shadow DOM is ready. This is basically the time when the content of the component is ready to interact with.

Daniel Robinson Over a year ago

so if I call document.body.appendHtml('<web-sandbox-component></web-sandbox-component>'); will angular auto detect the dom change and populate it with my components template shadow dom?

Günter Zöchbauer Over a year ago

No, you have to call compile on the new HTML to make Angular 'process' it. This is what the answers in the question you linked are about.

Daniel Robinson Over a year ago

thanks that looks great, I'll try it out when I get home and accept the answer then, just for those that don't know (like me) what is the MyAppModule and how do I define one?

|

Collectives™ on Stack Overflow

angular.dart how to create a custom component programmatically and add to page?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related