Adding animation to ng-container

Question

I've a simple sidebar component in my Angular app:

<sidebar [visible]="isSidebarVisible$ | async">
    <ng-container #vc [@enterLeaveAnimation]></ng-container>
</sidebar>

Inside this component I'm displaying components dynamically by lazy loading (they are getting rendered to <ng-container>).

The problem I'm facing: according to this answer it's not possible to use animation on <ng-container>. I can define the same animation inside every single component I wan't to lazy load, then it would work, but I don't wan't to do that. Is there a cleaner way of doing this?

score 0 · Answer 1 · answered Jan 21 '21 at 15:57

Attach animation to parent element:

<sidebar [visible]="isSidebarVisible$ | async" [@enterLeaveAnimation]="yourTrigger">
    <ng-container #vc></ng-container>
</sidebar>

and define your yourTrigger which triggers after component is loaded, then write animation as by example, appear by height:

trigger('enterLeaveAnimation', [
    transition('* <=> *', [
      query(':enter', [
        style({ height: 0 , overflow: 'hidden'}),
        animate( '200ms', style({ height: '*', overflow: 'unset' }))
      ],{ optional: true }),
      query(':leave', [
        style({ overflow: 'hidden'}),
        animate( '200ms', style({ height: 0 }))
      ], { optional: true }),
    ]),
  ])

I don't know how your lazy component looks like so you should make some tweak to query() statement.

Adding animation to ng-container

1 Answers1