angular - Parent variable not working inside of ng-content -
intro: i'm working on ng2 components structure looks 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, , when action happen inside of <card>
component (parent component), based on current state, i'd trigger animation methods inside <card-content-type-n>
components (children component). sequence of animations i'll use animationbuilder
, elementref
.
issue: decided pass parent component variable children component, , implement ngonchanges()
inside of children, trigger specific animation depends of current variable value. have troubles pass parent variable children when use ng-content inside of parent template.
i created simplified example (i replaced <card>
<parent-comp>
, , <card-content-type-n>
<child-comp>
): https://plnkr.co/edit/ohijjmwdx6ifrisxsanb?p=preview
in example parentvar
not passed child-comp
. bug in angular2 or i'm doing wrong? suppose related ng-content
scope, lack docs/examples this.
in same example inside of src/parent-comp.ts
if replace intial template <child-comp [childvar]="parentvar"></child-comp>
parent variable passed properly.
also inside of src/app.ts
if replace initial template this:
<parent-comp> <child-comp [childvar]="true"></child-comp> </parent-comp>
static variable passed properly.
does have similar issue? or have idea how can solve issue?
you can try this:
<parent-comp #parent> <child-comp [childvar]="parent.parentvar"></child-comp> </parent-comp>
here plunkr https://plnkr.co/edit/rvmruocy2mhtl4ytmvio?p=preview
Comments
Post a Comment