Parent controlled child animations using *ngIf don't kick in

@_oliver wrote:

I’m counting on you experts, as I’ve spend roughly a full day trying to get a nested parent - child component setup working that uses *ngIf to show/hide child components.
All in vain, and desperately seeking advice.

(Note, all code snippets below is “simplified” code)

Here is what I would like to do:

<parent (swipe)="swipeHandler()">
   <child *ngIf="isActive === child1">1</child>
   <child *ngIf="isActive === child2">2</child>
   <child *ngIf="isActive === child3">3</child>
</parent>

The goal:
Depending on wipe left or right, the currently active child slides out to the left or right (counter direction).
The newly made active child should slide in following the swipe direction.

The challenge:
Telling the child comp from which direction to slide in or out.

The crux:
The child animation is determined by the parent, henec the million dollar questions are, how do I either:

• tell the child’s (@HostBinding) animation variable which value/state it should consider in time so once the *ngIf kicks in, the child animates correctly (coding attempt below)
• or setup a nested animation declaration in the parent that manages proper (parameterized) child animations

I’ve tried various versions, none worked out really.
In some cases I ran again and again in funny errors Error: Found the synthetic property @slide. Please include either "BrowserAnimationsModule".
In other cases just nothing happened.

Below, simplified code, what am I missing?
Note: I have had no issues getting *ngFor (parent and child) elements animated in a parent hosted nested (using query()…) animation declaration block.

This however looks like a different beast to tame:

@Component({
  selector: 'child',
  template: `<ng-content></ng-content>`
  animations: [
    trigger('childAnim', [
      transition('void => toLeft', [style({ opacity: 0, transform: 'translate3d(100%,0,0)' }), animate("0.3s ease-in", style({ opacity: 1, transform: 'translate3d(0,0,0)' }))]),
      transition('void => toRight', [style({ opacity: 0, transform: 'translate3d(-100%,0,0)' }), animate("0.3s ease-in", style({ opacity: 1, transform: 'translate3d(0,0,0)' }))]),
      transition(':leave', [style({ opacity: 1 }), animate("1s ease-out", style({ opacity: 0 }))])
    ])
]
})
export class ChildComp {
  @HostBinding('@childAnim') public childAnim = 'toLeft'; // Default <=== but must be overwritten my parent component! How??
  constructor() { }
}

@Component({
  selector: 'parent',
  template: `<ng-content></ng-content>`
})
export class ParentComp {

  public animDirection; // How to 'pass' this on to the child comp??

  constructor() { }

  swipeHandler(event){
    if(left)
      this.animDirection = 'toLeft';
    else
      this.animDirection = 'toRight';
  }
}

Thank you so much!

Posts: 1

Participants: 1

Read full topic