Animate div on created Angular 2

Question

I'm new to angular animations, and i've run into a problem. i have a stacked dropdown menu, and when i click a menu item, i want it to be animated like it's sliding into view. i'm using bootstrap4, and the div is display: none, in it's first state, then display: block. I also have a directive, that handles opening and closing it, and tracks outside clicks. right now, i can only set the menu to slide open the first click, or every other (which gets out of sync if i click outside the button and the menu closed, i.e. the animation state is not changed)

is there a way to animate a div being created in angular? something like on entry and on exit, so i can get a two way animation going? here is my snippet:

animations: [
        trigger('menuSlide', [
            state('closed', style({
                'height': '1px',
            })),
            state('open', style({
                'height': '108px',
            })),
            transition('closed => open', animate(50)),
        ])
    ]
})
export class NetworkComponent implements OnInit {
    @ViewChild('DropdownOne') dropdownOne: ElementRef;
    stateOne = 'closed';
    stateTwo = 'closed';

    constructor() {}

    animate() {
        this.stateOne = 'open';
        console.log('open');
        this.normalState(this.stateOne);
    }

    normalState(state) {
        console.log('closed')
        state = closed;
    }

currently it only opens the first time animated, i have made it a switch statement, but again it goes out of sync with outside clicks. a directive handles the state

here is the directive just for reference:

// handles dropdown menu and click out function for multiple items

    constructor(private elRef: ElementRef) {}

    @HostListener('document:click', ['$event'])
    clickOut(event) {
        let clickedComponent = event.target;
        let inside = false;

        do {
                if (clickedComponent === this.elRef.nativeElement) {
                    inside = true;
                }
                clickedComponent = clickedComponent.parentNode;
        } while (clickedComponent);
        if (inside) {
            if (this.elRef.nativeElement.classList.contains('show')) {
                this.elRef.nativeElement.classList.remove('show');
            } else {
                this.elRef.nativeElement.classList.add('show');
            }
        } else {
            this.elRef.nativeElement.classList.remove('show');
        }
    }

}

--UPDATE-- currently i can animate the div by having it start at a height: 0px; then ending it's state at the height i want. but this is really messy, and when closing, it has a slight 'glitch' as it shrinks and then goes to display: none; again.