Angular router outlet incorrect height after adding router animation

Question

I am trying to add router animations for my angular project, I have added an animation but for the animation needs to work I am adding absolute position for the selector inside the router-outlet tag.

Which is creating the problem and the component inside the outlet is not taking it's full content height and getting chopped of from the bottom.

Animation

export const routerAnimation = trigger('routerAnimation', [
    transition('* => *', [
        query(':enter', [style({ opacity: 0 })], { optional: true }),
        group([
            query(':leave', [animate(300, style({ opacity: 0 }))], {
                optional: true
            }),
            query(
                ':enter',
                [style({ opacity: 0 }), animate(300, style({ opacity: 1 }))],
                { optional: true }
            )
        ])
    ])
]);

HTML Layout

<div class="admin-layout-outer">
    <admin-header></admin-header>
    <admin-sidebar></admin-sidebar>
    <div class="admin-layout-inner">
        <ng-scrollbar
            [visibility]="'hover'"
            [appearance]="'compact'"
            [autoHeightDisabled]="false"
            [viewClass]="'custom-scrollbar'"
            [pointerEventsMethod]="'scrollbar'"
            [trackClass]="'custom-scrollbar-track'"
            [thumbClass]="'custom-scrollbar-thumb'"
        >
            <div
                class="admin-layout-content"
                [@routerAnimation]="
                    adminLayout.isActivated ? adminLayout.activatedRoute : ''
                "
            >
                <router-outlet #adminLayout="outlet"></router-outlet>
            </div>
        </ng-scrollbar>
    </div>
</div>

Layout CSS

.admin-layout-outer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--white);
}
.admin-layout-inner {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 70px;
    padding-left: 225px;
}
.admin-layout-content {
    width: auto;
    margin: 30px;
    position: relative;
    min-height: calc(100vh - 130px);
}
::ng-deep .admin-layout-content > :last-child {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

score 0 · Answer 1 · answered Apr 12 '23 at 08:01

Check the example in the docs

See that the animation is like

trigger('routeAnimations', [
    transition('*<=> *', [

      //you should include this
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
      })
      ], { optional: true }),

      //now you add your query enter
      query(':enter', [...])

      //interesting you can add leave animateChild
      query(':leave', animateChild(), { optional: true }),

      //here your animation group
      group([...your group animation...])
 ]);

Angular router outlet incorrect height after adding router animation

1 Answers1