How to hide navbar-collapse on menu item click in Angular 2 in mobile version?

Question

Angular

Actually in app.component.html I display the menu (statically):

<nav *ngIf="authService.isLogged()" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" [routerLink]="['/']">
                <!--<img [src]="imgLOGO" class="img-responsive">-->
            </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">

                <li>
                    <a routerLink="/account1" routerLinkActive="active">Пункт 1</a>
                </li>

                <li>
                    <a routerLink="/login" routerLinkActive="active">Выход</a>
                </li>

            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

And the question is how to hide the expanded menu in the mobile version when clicking on an item?

Answer 1

While using this code, after loading the component template:

ngAfterViewInit() {
        $('.navbar-collapse').on('click', 'a', function (e) {

            $('.navbar-collapse').collapse('hide');
        });
    }