How to add Angular animations to components?

Asked Jun 23 '17 at 01:56

Active Jun 23 '17 at 01:56

Viewed 257 times

I am using Angular 4, I have two components, a nested component (parent-child), simply imagine my child component name is child, and obviously I can import my child to its parent view by using <app-child> HTML element.

I have an animation and when I add the animation to it's not working, but when I move animations into the child component, it's working.

Example

This animation is not working

<app-child *ngFor="let item of child" [@anim-child-list]></app-child>

When I move the animation and its logics to the child component, it works, here is the child component:

<li [@anim-child-list]>
{{item.titme}}
</li>

How is it possible to make a component (here <app-child>) animate?

asked Jun 23 '17 at 01:56

TypeScript Learner

We would need to see either a Plunkr, or the code for your component/animation in order to better help here. – MichaelSolati Jun 23 '17 at 02:04
@MichaelSolati Mr. Solati again :) Yes sir, I will add my code ASAP – TypeScript Learner Jun 23 '17 at 12:25
@MichaelSolati The question seems clear for me, but a code will help to understand it better and provide a solution. – Mohammad Kermani Jun 24 '17 at 07:58
@M98 the fact that the child elements should be animated from the parent in fine with. But what is the expected animation. That's all. And yes, the code would offer better insight to that. – MichaelSolati Jun 24 '17 at 13:34
Have the same issue right now.. did you ever solve it? – Mackelito Jul 10 '17 at 18:44
@Mackelito Nope! Do you have any idea? – TypeScript Learner Jul 12 '17 at 20:47
1

I solved it by putting the animation on the child and then pass state as a @Input() state; – Mackelito Jul 13 '17 at 06:41
@Mackelito Thanks for sharing it! Awesome way – TypeScript Learner Jul 15 '17 at 19:58

How to add Angular animations to components?

Example

0 Answers0