0

When I move my animation from inside my element onto my host element it refuses to work, from what I have researched this is the correct syntax?

Here is my host element

    <fr-add-edit-property *ngIf="this.aps.propertyToAdd" @mapLoadingActiveProperties></fr-add-edit-property>

Here is the animation

      export const mlap = trigger('mapLoadingActiveProperties', [
        transition(':enter', [
          style({
            height: 0,
            opacity: 0
          }),
          animate(new MapConfig().animations.activeProperty)
        ]),
        transition(':leave', [
          animate(new MapConfig().animations.activeProperty),
          style({
            opacity: 0,
            height: 0
          })
        ])
      ])

My hostbinding

      @Component({
        selector: 'fr-add-edit-property',
        templateUrl: './add-edit-property.component.html',
        styleUrls: ['./add-edit-property.component.scss'],
        animations: [mlap]
      })
      export class AddEditPropertyComponent implements OnDestroy {

        @HostBinding('@mapLoadingActiveProperties') public mapLoadingActiveProperties = true

I am also importing the correct BrowserAnimationsModule etc, this works flawlessly if I include the animation inside the element, just not on the parent Host element?

Any ideas.

22Ryann
  • 137
  • 1
  • 11

1 Answers1

0

Probably, that is because the host element has display: inline by default. Try to change it to 'block' inside your add-edit-property.component.scss:

:host {
    display: block;
}
Valeriy Katkov
  • 33,616
  • 20
  • 100
  • 123