3

Chances are I am going about this all wrong but is there a way to delay ngIf?

I have elements in a parent component, when the element is clicked it fades out and is removed from the DOM with ngIf, as that element is removed, elements from the child component are supposed to come in.

The issue is (i think): there is an overlap when elements from the parent and elements from the child are added and removed resulting in a "jumping" into place of the element in the child component.

Here is a gif to illustrate:

enter image description here

And here the html:

<div class="tours-thumbs" *ngIf="!isTourDetailsShown" [@toursThumbsInOut]>
    <div class="tour-container" (click)="showTourDetails($event)" *ngFor="let tour of tourThumbs"
        id="{{ tour.sys.id }}">
        <figure class="tour-image">
            <picture>
                <img src="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.file.url }}"
                    alt="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.description }}"
                    title="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.title }}"
                    [target]="tourBackgroundImg" dynamicBackgroundImg>
                <figcaption><span>{{ tour.fields.tourTitle }}</span></figcaption>
            </picture>
        </figure>
    </div>
</div>
<app-tour-info (sendBackToAllToursEvent)="getBackToAllTours($event)" [tourId]="tourId" *ngIf="isTourDetailsShown">
</app-tour-info>
</div>

As you can see the red button shows up in the left corner before the image thumnails are fully removed from the DOM, then the button jumps to the top, what am I missing? Here is a Stackblitz.

Ron Rofe
  • 738
  • 1
  • 9
  • 25
felixo
  • 1,453
  • 6
  • 33
  • 60

1 Answers1

4

One possible solution for your problem is to use animation callback events in angular.
See official angular documentation here: AnimationEvent.
Stackblitz Sample: https://stackblitz.com/edit/angular-ivy-y5momt

NiK648
  • 1,484
  • 1
  • 9
  • 18
  • Great input thank you! But how about if one also gets the child component animated? How come something like this won't work: https://stackblitz.com/edit/angular-ivy-xw43cf ? Ideally what I am trying to achieve is that once the elements of the parent component animate out of the DOM, I would like the elements of the child to animate in, and vice versa.... – felixo May 18 '20 at 22:09
  • It seems to me that your stackblitz sample is already working as per your requirements. But it would be better if you move the child component element animation to the child component itself instead of keeping it in parent component. Please see here: https://stackblitz.com/edit/angular-ivy-vq8uxr. – NiK648 May 19 '20 at 20:22