Angular анимация дочернего маршрута

Question

Я выдергиваю волосы этим, но у меня есть страница с двумя выходами маршрутизатора на них, определенными ниже

    component.ts:
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [trigger('isVisibleChanged', [
    state('void', style({
      width: '0'
    })),
    state('false', style({
      width: '0'
    })),
    state('true', style({
      width: '18.75rem'
    })),
    transition('0 => 1', animate('300ms ease-in')),
    transition('1 => 0', animate('300ms ease-out')),
    transition('void => 1', animate('300ms ease-in'))
  ])]

})
export class AppComponent {

  shouldAnimate: boolean;

  constructor(private route: ActivatedRoute){
    this.route.params.subscribe((params) => {
      console.log(params);
      console.log(this.route.snapshot.data);
    });

      if (this.route.outlet === 'side-panel') {
        this.shouldAnimate = true; // Yes, I do enter here every time
      }
  }

компонент. html

<div class="d-flex flex-row w-100 h-100">
    <div class="w-100 h-100">
        <router-outlet></router-outlet>
    </div>
    <div class="shadow border-left h-100" style=" z-index:9999;" [@isVisibleChanged]="shouldAnimate">
        <router-outlet name="side-panel" #outlet="outlet"></router-outlet>
    </div>
</div>

, но всякий раз, когда я загружаю новый компонент через маршрутизатор на боковой панели, он не анимируется. Есть идеи?

Следует ли использовать анимацию go в компонентах, которые отображаются в маршрутизаторе боковой панели? Мне не нравится эта идея, поскольку для каждого из них нужно будет определить [анимацию ...].