0

Use case, I have two animations: fader and slideLeft.

I would like to be able to switch them out. I was trying to set the animationTrigger dynamically? but can't quite figure it out?

component.ts

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { fader, slideLeft } from '../route-animations';
import { AnimationTriggerMetadata } from '@angular/animations';

@Component({
 selector: 'secure',
 templateUrl: './secure.component.html',
 animations: [
  fader,
  slideLeft
 ]
})
export class SecureComponent implements OnInit {
// nav bar open or small
isOpen = true;
animationTrigger: AnimationTriggerMetadata ;

constructor(
) {
}

prepareRoute(outlet: RouterOutlet) {
 console.log("route animation - secure", outlet);
 return outlet.isActivated ? outlet.activatedRoute : '';
}


}

component.html

<div [@animationTrigger]="prepareRoute(outlet)">
 <router-outlet #outlet="outlet"></router-outlet>
</div>
Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
Mark
  • 2,543
  • 6
  • 33
  • 44
  • You should consider using [Router and subscribing to the events](https://stackoverflow.com/a/35912966/7264565). – Jordan Hall Apr 11 '19 at 17:12
  • hmmm, guess this is harder than I thought? – Mark Apr 11 '19 at 18:10
  • 1
    Your question is pretty hard to understand/solve because we have no detail about the animation itself. You might be able to provide a single animation that controlls both triggers. Can you provide a video and/or can you add your animation metadata. – Jonathan Stellwag Apr 12 '19 at 07:21

0 Answers0