Parent variable not working inside of ng-content

Question

Intro: I'm working on ng2 components whose structure looks like this:

<cards>
  <card>
    <card-content-type-1 (state)="cardState"></card-content-type-1>
  </card>
  <card>
    <card-content-type-2 (state)="cardState"></card-content-type-2>
  </card>
  <card>
    <card-content-type-3 (state)="cardState"></card-content-type-3>
  </card>
  ...
</cards>

And I'm changing states of each <card> based on click/mouseenter/mouseleave events, and when some action happen inside of <card> component (parent component), based on current state, I'd like to trigger some animation methods inside <card-content-type-N> components (children component). For sequence of animations I'll use AnimationBuilder and ElementRef.

---

Issue: I decided to pass parent component variable to children component, and to implement ngOnChanges() inside of children, which will trigger specific animation depends of current variable value. But I have troubles to pass parent variable to children when I use ng-content inside of parent template.

I created simplified example (I replaced <card> with <parent-comp>, and <card-content-type-N> with <child-comp>): https://plnkr.co/edit/OHIJjMwdx6ifRiSxsanB?p=preview

In this example parentVar is not passed into the child-comp. Is this some bug in Angular2 or I'm doing something wrong? I suppose that is related with ng-content scope, but we lack good docs/examples about this.

In same example inside of src/parent-comp.ts if we replace intial template with <child-comp [childVar]="parentVar"></child-comp> parent variable is passed properly.

Also inside of src/app.ts if we replace initial template with this:

<parent-comp>
  <child-comp [childVar]="true"></child-comp>
</parent-comp>

static variable is passed properly.

Does someone have a similar issue? Or have idea how I can solve this issue?

Answer 1

You can try something like this:

<parent-comp #parent>
  <child-comp [childVar]="parent.parentVar"></child-comp>
</parent-comp>

Here is the plunkr https://plnkr.co/edit/rVMruocy2Mhtl4yTmvio?p=preview