angular dart: is it possible to inject a component?

Question

dart 1.24.3, Angular 4.0.0

For reusable reasons, I have divided my application into many packages. Let's say that I'm using package C, that depends on package B that depends on package A. A is used also in other packages, and B can be used stand-alone. Finally, C add some more info to B and it is in some way customized.

Now, in package A I have a modal window that shows some info, but in package B I should add a component and in package C even one more. As this modal window is used in all my component forms, I cannot customize it inside the child packages, because this would mean to inherit all parent forms and customize them. What I would like to use is something like the providers injection (example what I would like to declare in my application component in Package C):

 ModalWindowComponent,
      const Provider(pack_b.ModalWindowComponent, useClass: ModalWindowComponent),
      const Provider(pack_a.ModalWindowComponent, useClass: ModalWindowComponent)

Googling I have seen something that maybe I can use in my case, the ComponentResolver class. But I could not get if it is something new to Angular 5 or can be used also in angular 4. In some other places it seems also that it will be deprecated, so I'm a little bit confused. More, I do not need to dynamically add a component in the DOM, but dynamically substitute the component with the one (that inherits the base one) from the child package.

Is there a way to do that? Is there some example that I can give a look at?

I just added an updated example to stackoverflow.com/questions/36325212/… You can't inject components, but you can pass component types around and then make Angular instantiate them where you need them and add them to the view using ViewContainerRef- — Günter Zöchbauer
Sorry Günter, is it the right example? It is not a Dart project and I could not find any reference to NgComponentOutlet — J F
Sorry, I missed that the question is about Dart. The basic approach should work the same. github.com/dart-lang/angular/blob/master/doc/… provides some datails — Günter Zöchbauer
I do not know TypeScript and even if the syntax is similar, sometimes there are some differences that I do not know how to port to Dart. But, anyway, thanks, I will try to understand that example. I thought it was an NgComponentOutlet example. — J F
What is not clear to me is how I can get the right compoennt in the class of the A package. I means, In your example all components are known and from the same package. But in my use-case, the class that have to load dynamically the component does not know the component that will be injected because it comes from a child package. — J F

rkj rkj · Accepted Answer · 2018-02-26T18:15:16

You can use ComponentLoader which requires passing the ComponentFactory and a place in the DOM. There are good examples in methods' documentation.

You get the ComponentFactory for the Component by importing the .template.dart file which has @Component annotation, and appending NgFactory to the name of the component, for example:

file foo.dart:

@Component(selector: 'foo')
class FooComponent {}

file bar.dart:

import 'foo.template.dart';

@Component(selector: 'bar', template: '<div #placeholder></div>')
class BarComponent {
  final ComponentLoader _loader;

  @ViewChild('placeholder', read: ViewContainerRef)
  ViewContainerRef theDiv;

  BarComponent(this._loader);

  void load() {
    _loader.loadNextToLocation(FooComponentNgFactory, theDiv);
  }
}

angular dart: is it possible to inject a component?

1 Answers