Animation problems with angular 4

sidebar-menu-accrodion.directive.ts

import { Directive, HostListener, ElementRef } from '@angular/core';

function hideTreeview(elements, type?: string) {
  if(elements.length < 1 || elements === undefined) { return; }
  
  for(let i = 0; i < elements.length; i++) {
    if(type === "subtree") {
      elements[i].style.display = 'none';
      return;
    }
    // remove the menu-open class
    let subtreeview = elements[i].getElementsByClassName('treeview-menu');
    hideTreeview(subtreeview, 'subtree');
    elements[i].className = 'treeview';
  }
  return;

}

@Directive({
  selector: '[alphaSidebarMenuAccordion]'
})
export class SidebarMenuAccordionDirective {

  private parentUl: HTMLElement;

  @HostListener('click') onClick() {
    this.parentUl = this.el.nativeElement.closest('ul');
    let activeItems  = this.parentUl.getElementsByClassName('menu-open');
    hideTreeview(activeItems);
    
    this.el.nativeElement.className = "treeview menu-open";
    let treeview = activeItems[0].getElementsByClassName('treeview-menu');
    for(let i = 0; i < activeItems.length; i++) {
      let el = activeItems[i].getElementsByClassName('treeview-menu');
      (<HTMLElement>el[0]).style.display = 'block';
    }

    
  }
  constructor(private el: ElementRef) { }
}

sidebar-menu.component.html

<ul class="sidebar-menu">
  <ng-container *ngFor="let item of menus" [ngSwitch]="item.type">
    <li *ngSwitchCase="'header'" class="header">{{ item.label }}</li>   
     <!-- triggerable directive !-->
    <li *ngSwitchCase="'normal'" alphaSidebarMenuAccordion>
      <a>
        <i class="fa fa-th"></i> <span>{{ item.label }}</span>
        <span class="pull-right-container">
          <small class="label pull-right bg-green">new</small>
        </span>
      </a>
    </li>
    <!-- triggerable directive !-->
    <li *ngSwitchCase="'treeview'" class="treeview" alphaSidebarMenuAccordion>
      <a href="javascript:void(0)">
        <i [class]="item.icon"></i> <span>{{ item.label }}</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left pull-right"></i>
        </span>
      </a>
      <ul class="treeview-menu">
        <ng-container *ngFor="let childItem of item.children">
          <li><a>
            <i [class]="childItem.icon"></i> {{ childItem.label }}</a>
          </li>
        </ng-container>
      </ul>
    </li>
  </ng-container>
</ul>