How can I get my animation to work in the other direction also?

Question

I have an angular slider whose default state is TRUE/OPEN. I am able to use angular animations to slide it and it works only in one direction. I am not seeing that transition back. Any help would be great.

HTML:

<div class="container" [@slide]="slideOpen">
</div>

TS:

 import {animate, state, style, transition, trigger} from '@angular/animations';

    type SlideOpen = true|false;

    @Component({ 
    animations: [trigger(
          'slide',
          [
            state('true', style({transform: 'translateX(0px)'})),
            state('false', style({transform: 'translateX(-50%)'})),
            transition('* <=> *', animate(500))
          ])],
    })

    export class PanelInfo { 
        slideOpen = true;
    }

Answer 1

I made a sample example WORKING STACKBLITZ similar to your code

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

type PaneType = 'left' | 'right';

@Component({
  selector: 'my-slide-panel',
  styleUrls: [ './slide-panel.component.scss' ],
  templateUrl: './slide-panel.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('left', style({ transform: 'translateX(0)' })),
      state('right', style({ transform: 'translateX(-100%)' })),
      transition('* => *', animate(300))
    ])
  ]
})
export class SlidePanelComponent {
  @Input() activePane: PaneType = 'left';
}

Hope this is helpful