dependency injection for interfaces


I have a component which contains a generic popup, it implements therefore the interface PopupParent

class SubjectListComponent implements OnInit, PopupParent {

The generic class InfoPopup needs to deal abstractly with its parent (that implements PopupParent), so I would like to take get the parent injected by its interface (instead of being injected by its concrete class SubjectListComponent)

class InfoPopup {
  final PopupParent _parent;

  //...non relevant code

The issue is that the SubjectListComponent was registred by class in the injector, so the injector won’t find what to inject into the InfoPopup class.

If I try to declare my SubjectListComponent manually, I found that it has to be done in the providers constants. but I still don’t have my instance of SubjectListComponent when I declare my component…

How could I do that?

I also tried to pass the parent to an @Input:

    selector: 'info-popup',
    templateUrl: 'info_popup.html',
    styleUrls: const ['info_popup.css'],
class InfoPopup {
  final PopupParent parent;

  //...non relevant code

But then I got stuck on how to inject the this instance from the component client :


  <info-popup [parent]="this"></info-popup>

since dart angular doesn’t recognize this as a keyword, but it searches for a property called this in SubjectListComponent.dart

Two issues were created for this question:


This can be accomplished by providing aliases. multi: true allows to add more than one alias. There is no way to make automatically derive the interfaces.

  providers: [
      const Provider(PopupParent, useExisting: SubjectListComponent, multi: true),
      const Provider(PopupParent, useExisting: FooComponent, multi: true)

class InfoPoupup ...


To make


work, you could add a getter to the component

get self => this; 

and then use


Answered By – Günter Zöchbauer

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *