3

I'm trying to inject my parent component into a child component (tight cupling, I know). The problem is I have an inheritance chain and for some reason I get an error, that there is no provider for the dependency.

tl;dr;

I'm injecting the base class in the child component, but I get the following error: Template parse errors: No provider for BaseClass

export class BaseClass { ... }

@Component({ selector: 'parent-comp' })
export class ParentComponent extends BaseClass {}

@Component({ selector: 'child-comp' })
export class ChildComponent {
    constructor(public parent: BaseClass) {}
}

Usage:

<parent-comp>
   <child-comp>

The whys

My ParentComponent inherits some functionalities from the BaseClass and I would like to access some of it in the child component. I'm building a library and there are more than one inherited components from BaseClass. I can't tell which of the inherited components will be used, because the library consumer decides that.

I've tried adding the @Host() decorator but that doesn't work either.

From my understanding of dependency injection (which is not the best) this should work. I'm trying to understand the why's here!

If anyone could shed some light on the matter, I'd appreciate it!

2 Answers 2

2

Unfortunately the injector does not support component location by inheritance. It can only find a specifically named component i.e. ParentClass.

What you could do is create a more generic InjectionToken for your parent's base class:

export const BaseClassInjectionToken = new InjectionToken<BaseClass>('BaseClass');

Then provide it in your parent class Component declaration - providers property.

providers: [{ provide: BaseClassInjectionToken, useExisting: forwardRef(() => ParentComponent) }]

(nb: the forwardRef prevents a compile-time circular-reference).

Then the child can have the InjectionToken injected into it.

constructor(@Inject(BaseClassInjectionToken) private parent: BaseClass) 
-3

If you want a child component to be displayed within a parent component, you add that child component's selector to the parent component's HTML. It is not designed to inject a component into another component.

If you have shared functionality, add that functionality to a service and use the service from both the parent and the child.

The communication between a parent and child should be limited to @input properties and @output events.

The purpose of a component is to display a user interface (some HTML). The purpose of the code within a component is to support the display of that HTML.

Use services to share properties/state or functionality/methods. Create a custom directive to share UI logic.

7
  • Thanks for the answer! I know I can solve it with a service, but I would like to understand why is it better practice to create a service "just" for sharing a property? Also I don't understand why doesn't this work? Will it work if I have an inheritance chain in the services?
    – zolipapa
    Jul 25, 2018 at 11:18
  • 1
    The accepted answer is best practice in the majority of cases, but there are use cases where injecting the parent component directly into its children is a perfectly valid and reasonable technique. Take the CdkStepper for example: The 'parent' CdkStepper gets injected into each of its 'child' CdkStep(s). This allows setting the active step of the parent from the child step. Generally, we try to keep components as loosely coupled as possible, which is one reason why services are so helpful. But sometimes components are intended to be tightly coupled, and @Inject can be very helpful too! Nov 18, 2019 at 5:03
  • 1
    Regardless of the validity of the answer it does not answer the question asked. The question can be valid in some cases and it is not the answerer's responsibility to judge. Hence the downvote. Apr 4, 2020 at 15:56
  • @DanielLeiszen well done. you gave reason for downvote..but what about an answer? shocked to see an angular courses author get down votes. I think that is overflow
    – user14734781
    Mar 7, 2021 at 14:32
  • @CICSolutions AFAIK, the CdkStepper is an AbstractControl, not a component.
    – DeborahK
    May 5, 2021 at 18:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.