How to add a component programmatically in Angular.Dart?

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]);
    }
  }

Leave a Comment