Search code examples
dartangular-dart

AngularDart 5: How to get parent component


In AngularDart 3 or 4, we can write

@Component(
    selector: 'my-app', 
    template: '<my-child></my-child>', 
    directives: [ChildComponent])
class AppComponent {}

@Component(selector: 'my-child', template: 'The child')
class ChildComponent {
  final AppComponent _parent;

  ChildComponent(this._parent);
}

The ChildComponent has the parent injected in the constructor.

When I try to convert this code to AngularDart 5, I have this error: No provider found for AppComponent

What is the correct way to convert this code to AngularDart 5?


Solution

  • You need to set the visibility of the parent to make it injectable

    @Component(
      ...,
      visibility:  Visibility.all
    

    or (see also https://github.com/dart-lang/angular/blob/11c05e29fafcea13e4d54f246e70402460777e94/angular/lib/src/core/metadata/visibility.dart#L41)

    @Component(
      selector: 'parent',
      directives: const [Child],
      providers: const [
        const ExistingProvider(Example, useExisting: Parent),
      ], 
    

    This change was made to reduce generated code size.