Set display to none/block after animation has finished running in Angular 5 app

Question

I'm working on Angular 5 app that has some animations when changing tabs. It simply does ease-in-out animation.

What I want to achieve now, is to set the display to either none or block once the animation has stopped running. I'm not really sure how to do that.

My current code looks like:

animations: [
    trigger('slideInOut', [
        state('active', style({
            transform: 'translateY(0px)'
        })),
        state('out', style({
            transform: 'translateY(1000px)'
        })),
        transition('active => out', animate('600ms ease-in-out')),
        transition('out => active', animate('600ms ease-in-out'))
    ]),
    trigger('slideLeftRight', [
        state('leftOut', style({
            transform: 'translateX(-1000px)'
        })),
        state('active', style({
            transform: 'translateX(0px)'
        })),
        state('rightOut', style({
            transform: 'translateX(1000px)'
        })),
        transition('active => leftOut', animate('600ms ease-in-out')),
        transition('leftOut => active', animate('600ms ease-in-out')),
        transition('active => rightOut', animate('600ms ease-in-out')),
        transition('rightOut => active', animate('600ms ease-in-out'))
    ])

Any help would be appreciated.