I am trying to get animation between routes working in an Angular 4 project - but need to be able to alter the direction of the animation (translateX) based on the way the user is navigating through the app.

I have discovered that the only way to keep both the entering and exiting components in the DOM is to use void state.

Also, I have to bind the animation to the host element. If I try and bind it to an element within the component the exiting component is just replaced with the entering component.

I want this because I don't want the exiting component to disappear - I want it to slide off as the entering component slides in to get a smooth native feeling application.

I have a single trigger set up with four transitions:

trigger('routing',[
    state('*',style({transform: 'translateX(0)'})),
    transition('void => back',[
        style({transform: 'translateX(-100%'}),
        animate('800ms')
    ]),
    transition('back => void',[
        animate('800ms',style({
            transform:'translateX(100%)'
        }))
    ]),
    transition('void => forward',[
        style({transform: 'translateX(100%'}),
        animate('800ms')
    ]),
    transition('forward => void',[
        animate('800ms',style({
            transform:'translateX(-100%)'
        }))
    ])
])

In my components exported class I am binding this to the component host elements with:

@HostBinding('@routing') routing

I can manipulate routing (setting it to either 'back' or 'forward' to control direction) but this seems to create a new instance of the variable so that if I want to change animation direction the exiting page animates in the opposite direction to the incoming component because the instance of routing doesn't seem to have changed.

Is there any way to update the instance of routing bound to the host element? Is there an alternative way to achieve the result I need?

Thanks.