Angular animation on ngIf* not applying even though the code looks right

Question

The following angular animation is not applying or working on my toolbar, it should translate it out of view, but it does nothing, it only disappears when minimized === true. What could be the problem with my code? I already have animations in the same file, which work fine. But are dependent on a variable, not ngIf*.

Template

  <div class="details-container"
     [@onMinimizeAnimation]="{value: minimized, params:{upHeight: '392px', downHeight: '75px', time:'0.25s'}}"
     [@onCloseAnimation]="{value: closed, params:{upHeight: '392px', downHeight: 0, time:'0.25s'}}">
    <ng-container *ngIf="selectedItem">
        <div class="toolbar">
            <div class="toolbar-group left">
                <h3 class="selected-item"
                    *ngIf="!minimized"
                    [tooltip]="title"
                    [overFlowOnly]="true">{{ title + ' - ' + ('panel.detail.view.label' | translate) }}</h3>
            </div>
            <div class="toolbar-group right">
                <ng-content select="[detailsToolbarRight]"></ng-content>
            </div>
        </div>

The animation should transform translate the item out of view, and fade it out of view when the details panel gets minimized.

export const fadeOutOfScreen = (name: string) =>
    trigger(name, [
        transition(':enter', [style({ transform: 'translateX(100%)' }), animate('200ms ease-in', style({ transform: 'translateX(0%)' }))]),
        transition(':leave', [animate('200ms ease-in', style({ transform: 'translateX(100%)' }))]),
    ]);