Angular6: выпадающее меню в моей навигации не закрывается

Question

когда я нажимаю на кнопку, всплывающее меню появляется, но оно не закрывается автоматически, когда я нажимаю на другое меню

этот проект создан на Angular6 и bootstrap4

<li class="nav-item dropdown-content dropdown" dropdown>
      <a class="nav-link" dropdownToggle role="button"><i class="fa fa-user" aria-hidden="true"></i>Consumers</a>
      <ul *dropdownMenu  class="subnav">
        <li class="nav-item"><a class="nav-link" href="/guru">Overview</a> </li>
        <li class="nav-item"><a class="nav-link" href="#">Delete</a></li>
        <li class="nav-item"><a class="nav-link" href="#">InActive</a></li>
      </ul>
</li>  
<li class="nav-item dropdown-content dropdown" dropdown>
      <a class="nav-link" dropdownToggle role="button"><i class="fa fa-user" aria-hidden="true"></i>UserList</a>
      <ul *dropdownMenu  class="subnav">
        <li class="nav-item"><a class="nav-link" href="/guru">Overview</a> </li>
        <li class="nav-item"><a class="nav-link" href="#">Delete</a></li>
        <li class="nav-item"><a class="nav-link" href="#">InActive</a></li>
      </ul>
</li>

Я хочу автоматически закрыть это меню, когда нажимаю на другое меню или на это меню.