I am using a fade in animation in my angular component. If I define the animation inside the component decorator under animations: [], it works fine. However, I want to reuse the animation in different component therefore I have moved it to another file and exporting it from there. When I use this animation, it give my undefined error. I analyzed it and the fadeInAnimation is undefined. Here is my code:
fade-in.animation.ts
import { trigger, animate, transition, style } from '@angular/animations';
export const fadeInAnimation = trigger('fadeInAnimation', [
transition(':enter', [
// styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('.3s', style({ opacity: 1 }))
]),
]);
I am importing this animation in my component like this:
import { fadeInAnimation } from './animations/fade-in.animation';
// Other imports
@Component({
selector: 'app-some-component',
templateUrl: './some.component.html',
styleUrls: ['./some.component.scss'],
animations: [ fadeInAnimation ]
})
.. and using it in my component template like this:
<div [@fadeInAnimation]>Some content</div>
I am unable to understand why this animation works when I define it inside the component and doesn't work when I export the same from another file. What am I missing?
Someone set this as a duplicate of this question. I have done everything which is given in that other answer and the issue is still unresolved. The other question is related to creating separate animation files, which I am already doing.
