How to update the angular 2 animation status after component init

Question

I have a simple dropdown component that i want to animate. The problem is that despite the fact that the variable that controls animation state starts with the value "inactive" and my dropdown still appears when the component loads and only takes correct value after I hover the mouse over it. I cannot put zero height and padding in my styles file as i use the base value reference in my animation with '*'. And i have already tried to use the ChangeDetectorRef in my ngOnInit method.

<li (mouseenter)="showServicesSubMenu()"
                    (mouseleave)="hideServicesSubMenu()">
                    <a class="nav-link user-menu-item"
                       [@servicesLinkShadowState]="servicesLinkState"
                       href="javascript:void(0)"
                       id="services-menu-item"
                       routerLinkActive="active-menu active-services"
                       routerLink="services"
                       jhiTranslate="global.menu.services.main">
                        Послуги
                    </a>
                    <ul>
                        <li class="service-sub-menu"
                            *ngFor="let childNode of servicesOptions"
                            [@submenuDropdown]="servicesLinkState">
                            <a [routerLink]="childNode.href"
                               [jhiTranslate]="childNode.translateVar">
                                {{childNode.name}}
                            </a>
                        </li>
                    </ul>
                </li>

trigger('submenuDropdown',[
            state('active', style({height:'*', padding:'10px', borderBottom: '2px solid #b90062'})),
            state('inactive', style({height:'0', padding:0, borderBottom:'0px solid #b90062'})),
            transition('active<=>inactive', animate('250ms'))
        ])

Answer 1

If i understand your question,You can just use the css display property:

 trigger('submenuDropdown',[
            state('active', style({height:'100%', padding:'10px', borderBottom: '2px solid #b90062',display:'block'})),
            state('inactive', style({height:'0', padding:0, borderBottom:'0px solid #b90062',display:'none'})),
            transition('active<=>inactive', animate('250ms'))
        ])]

I have created plunker for this. Please have a look:https://plnkr.co/edit/Y0QWi6h4WmrNmA1LOHWq?p=preview

Answer 2

Sorry, it was just a typo in my initial state of animation. It happens after 12 hrs of non stop coding.