How to add a component programmatically in Angular.Dart?

Question

I would like to dynamically build a component tree basing on some information received from AJAX calls.

How to programmatically add a component to the DOM from inside of other component? I have <outer-comp> and I would like, basing on some logic, insert an <inner-comp>. The following code just inserts the elements <inner-comp></inner-comp> to the DOM, and not actual <inner-comp> representation.

@NgComponent(
  selector: 'outer-comp',
  templateUrl: 'view/outer_component.html',
  cssUrl: 'view/outer_component.css',
  publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {      
  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");
  }
}

Update: I managed to render the inner component correctly in the following way, but I'm still not sure if this is the proper way:

class AppComponent extends NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  AppComponent(this.compiler, this.injector);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    BlockFactory template = compiler(inner.nodes);
    var block = template(injector);
    inner.replaceWith(block.elements[0]); 
  }

}

could you show how you call your AppComponent constructor? how do you create a new compiler and a new injector? — Daniel Robinson
– Daniel Robinson, Commented Apr 21, 2014 at 9:47
@0xor1 no need to call the constructor - that's what dependency injection is for ;-) — Draško Kokić
– Draško Kokić, Commented Apr 25, 2014 at 20:10
so how would you achieve this in code that was not in a NgComponent class? say in the main method you wanted to call document.body.appendHtml('<my-comp></my-comp>') how would you then get angular to compile that? — Daniel Robinson
– Daniel Robinson, Commented Apr 27, 2014 at 11:25

Stephan Rauh · Accepted Answer · 2014-04-30 12:56:04Z

10

The API has changed in AngularDart 0.9.9:

BlockFactory now is ViewFactory
scope.$new now seems to be scope.createChild(scope.context)
injector.createChild(modules) now requires a list of modules (instead of a single one)

AngularDart 0.10.0 introduces these changes:

NgShadowRootAware not is ShadowRootAware
..value() now is ..bind(., toValue: .)

So the code of pavelgj now looks like so:

class AppComponent extends ShadowRootAware {
  Compiler compiler;
  Injector injector;
  Scope scope;
  DirectiveMap directives;

  AppComponent(this.compiler, this.injector, this.scope, this.directives);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    ViewFactory template = compiler([inner], directives);
    Scope childScope = scope.createChild(scope.context);
    Injector childInjector = 
        injector.createChild([new Module()..bind(Scope, toValue: childScope)]);
    template(childInjector, [inner]);
    }
  }

edited Apr 30, 2014 at 12:56

answered Mar 26, 2014 at 23:22

Stephan Rauh

3,1302 gold badges21 silver badges37 bronze badges

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

3 Comments

Ruslan Stelmachenko Over a year ago

I think you accidentally just copy-paste @pavelgj answer.

Stephan Rauh Over a year ago

Ouch! You're right. Hope I managed to fix the code - seems I've got rid of my tested version again. In any case, ng-include does something similar, so it's always a good idea to have a look at the implementation of NgIncludeDirective.

Stephan Rauh Over a year ago

What about ng-repeat? When I tried to append something like "<inner-comp ng-repeat='rows in ctrl.list'></inner-comp>" the NgRepeat directive didn't work. Even the constructor of NgRepeat wouldn't be called. After a while I began to suspect it's not my fault. What do you think, should ng-repeat work, or is there an important initialization missing in Pavel's example?

pavelgj · Accepted Answer · 2014-02-20 01:40:13Z

8

This would be a proper use of the block API.

class AppComponent extends NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  Scope scope;
  DirectiveMap directives;

  AppComponent(this.compiler, this.injector, this.scope, this.directives);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    BlockFactory template = compiler([inner], directives);
    Scope childScope = scope.$new();
    Injector childInjector = 
        injector.createChild(new Module()..value(Scope, childScope));
    template(childInjector, [inner]);
  }
}

Also, if you ever need to recompile the inner template make sure you do childScope.$destroy() on the previous childScope.

edited Feb 20, 2014 at 1:40

answered Dec 6, 2013 at 22:03

pavelgj

2,71113 silver badges15 bronze badges

5 Comments

Michal Pietrusinski Over a year ago

Thank you for the very fast response, your solution works fine.

long.luc Over a year ago

@pavelgi: This code works fine in angular 0.9.4. But in angular 0.9.6, compiler(...) require second parameter (DirectiveMap directives). What is DirectiveMap and what should I pass into the function?

Michal Pietrusinski Over a year ago

@pavelgj: Could you, please, update your response to match with the changes introduced in angular 0.9.9?

Daniel Robinson Over a year ago

how do you new up the arguments to the AppComponent constructor?

Michal Pietrusinski Over a year ago

You just declare any arguments you need - the dependency injection mechanism takes care of supplying proper values for you.

David Parish · Accepted Answer · 2014-10-09 17:37:16Z

The above code samples on longer work because of changes in the Angular Dart library. Specifically ViewFactory.call which no longer takes an injector but takes a Scope and a DirectiveInjector. I've tried adapting what's above and I get very close. The component shows up but none of the bindings are replaced (I see {{cmp.value}} for example.

Here's the code I'm using. I think the issue here is that DirectiveInjector is coming in as null.

void main() {
  IBMModule module = new IBMModule();
  AngularModule angularModule = new AngularModule();

  Injector injector = applicationFactory()
  .addModule(module)
  .run();

  AppComponent appComponent = injector.get(AppComponent);
  appComponent.addElement("<brazos-input-string label='test'/>");
}

@Injectable()
class AppComponent {
  NodeValidator validator;
  Compiler _compiler;
  DirectiveInjector _injector;
  DirectiveMap _directiveMap;
  NodeTreeSanitizer _nodeTreeSanitizer;
  Scope _scope;

  AppComponent(this._injector, this._compiler, this._directiveMap, this._scope, this._nodeTreeSanitizer) {
    validator = new NodeValidatorBuilder.common()
                      ..allowCustomElement("BRAZOS-INPUT-STRING")
                      ..allowHtml5()
                      ..allowTemplating();
  }

  void addElement(String elementHTML) {
    DivElement container = querySelector("#container");
    DivElement inner = new DivElement();
    inner.setInnerHtml(elementHTML, validator: validator);
    ViewFactory viewFactory = _compiler.call([inner], _directiveMap);
    Scope childScope = _scope.createChild(new PrototypeMap(_scope.context));
    if (_injector == null) {
      print("injector is null");
    }
    View newView = viewFactory.call(childScope, _injector);
    container.append(inner);
    newView.nodes.forEach((node) => inner.append(node));
  }
}


class IBMModule extends Module {
  IBMModule() {
    bind(BrazosInputStringComponent);
    bind(BrazosTextAreaComponent);
    bind(BrazosButtonComponent);
    bind(ProcessDataProvider, toImplementation: ActivitiDataProvider);
    bind(AppComponent);
  }
}

David Parish · Accepted Answer · 2014-11-05 17:32:44Z

2

I did finally get this to work but was not happy with having to add a timer:

@Injectable()
class AppComponent{
  NodeValidator validator;
  Compiler _compiler;
  DirectiveInjector _directiveInjector;
  DirectiveMap _directiveMap;
  NodeTreeSanitizer _nodeTreeSanitizer;
  Injector _appInjector;
  Scope _scope;

  AppComponent(this._directiveInjector, this._compiler, this._directiveMap, this._nodeTreeSanitizer, this._appInjector, this._scope) {
    validator = new MyValidator();
  }

  void addElement(String id, String elementHTML) {
    DivElement container = querySelector(id);
    DivElement inner = new DivElement();
    container.append(inner);
    Element element = new Element.html(elementHTML, validator: validator);
    ViewFactory viewFactory = _compiler.call([element], _directiveMap);
    if (_scope != null) {
      Scope childScope = _scope.createProtoChild();
      View newView = viewFactory.call(childScope, _directiveInjector);
      newView.nodes.forEach((node) => inner.append(node));
      Timer.run(() => childScope.apply());
    } else {
      print("scope is null");
    }
  }
}

answered Nov 5, 2014 at 17:32

David Parish

1311 silver badge7 bronze badges

3 Comments

Günter Zöchbauer Over a year ago

I think new Future(() => childScope.apply()); would be a slightly better way or scheduleMicroTask(() => childScope.apply()); (might not work though).

user1036712 Over a year ago

@GünterZöchbauer I believe the correct way would be to schedule it as a microtask. Why do you think this would not work though?

Günter Zöchbauer Over a year ago

ScheduleMicrotask might execute it too early.

Günter Zöchbauer · Accepted Answer · 2014-05-14 05:32:16Z

1

EDIT

The package http://pub.dartlang.org/packages/bwu_angular contains this decorator/directive as bwu-safe-html

------

I use a custom directive for that

@NgDirective(
  selector: '[my-bind-html]'
)
class MyBindHtmlDirective {
  static dom.NodeValidator validator;

  dom.Element _element;
  Compiler _compiler;
  Injector _injector;
  DirectiveMap _directiveMap;

  MyBindHtmlDirective(this._element, this._injector, this._compiler, this._directiveMap) {
    validator = new dom.NodeValidatorBuilder.common()
        ..allowHtml5()
        ..allowImages();
  }

  @NgOneWay('my-bind-html')
  set value(value) {
    if(value == null) {
      _element.nodes.clear();
      return;
    }
    _element.setInnerHtml((value == null ? '' : value.toString()),
                                             validator: validator);
    if(value != null) {
      _compiler(_element.childNodes, _directiveMap)(_injector, _element.childNodes);
    }
  }
}

It can be used like

my-bind-html='ctrl.somehtml'

Angular issue
I created an issue to include this functionality into Angulars ng-bind-html https://github.com/angular/angular.dart/issues/742 (declined)

edited May 14, 2014 at 5:32

answered Mar 17, 2014 at 8:44

Günter Zöchbauer

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

1 Comment

Günter Zöchbauer Over a year ago

The issue is closed. This functionality will not be added to Angular for security reasons.

Collectives™ on Stack Overflow

How to add a component programmatically in Angular.Dart?

5 Answers 5

3 Comments

5 Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related