In Angular 2, how to close all other menu when click specific menu?

Question

I have built a sidebar dropdown menu with toggle of sub-menus. In directive, I use @HostBinding to add 'open' to parent li class, and set css of li.open > ul to display:block to show sub-menus. My question is in Angular2, how to remove 'open'of all other li's class when I add 'open' to one specific parent li. Please see some of code below:

app-directive.ts

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

@Directive({selector: '[appNavToggle]'})

export class NavToggleDirective {
  @HostBinding('class.open') subMenuOpened:boolean;

  @HostListener('click', ['$event'] )
    confirmFirst(event: Event) {
    this.subMenuOpened = !this.subMenuOpened;
  }}

HTML

        <li class="nav-item" appNavToggle>
        <ul class="sub-menu">
            <li class="nav-item">Submenu1</li>
            <li class="nav-item">Submenu2</li>
            <li class="nav-item">Submenu3</li>
        </ul>
       </li>

        <li class="nav-item" appNavToggle>
        <ul class="sub-menu">
            <li class="nav-item">Submenu4</li>
            <li class="nav-item">Submenu5</li>
            <li class="nav-item">Submenu6</li>
        </ul>
       </li>

CSS

li > ul { display: hide; }
li.open > ul { display: block; }