Angular 6 - Свернуть мобильное меню при нажатии

Question

У меня есть статическая страница в angular 6, на которой есть несколько вкладок. Как я могу заставить мобильное меню свернуться при нажатии на элемент?Мне нужно что-то вроде этого кода jQuery (я не могу использовать jQuery).

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

Мой код меню навигации приведен ниже.

<ul class="navbar-nav w-100">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Finance legal tax and HR
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Information technology
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Risk and cybersecurity
        </a>
    </li>
</ul>

Answer 1

Вы можете использовать обработчик события click вместе со свойством компонента.

export class MyComponent{
 collpaseMenu: boolean = false;
}

и в вашем шаблоне:

<button (click)="collapseMenu = !collapseMenu"></button>

<ul class="navbar-nav w-100" [hidden]="collapseMenu">...</ul>