Collapse responsive navbar on angular 7

Hi im using navbar in angular 7 and i need to collapse it on another page location click, when i resize my browser or when i use my app on mobile the navbar put 3 bars icon for display menu, when i click on another place in the app the menu still shown, how can i collapse the menu ?

here is my HTML file.

<nav class="navbar navbar-inverse sub-navbar navbar-fixed-top">
    <div class="container"> 
        <div class="collapse navbar-collapse" id="subenlaces">
            <ul class="nav navbar-nav navbar-right">
                <li><a data-toggle="collapse"routerLink="/">Inicio</a></li>
                <li *ngFor="let item of menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                        aria-expanded="false"><span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li  *ngFor="let subitem of item.secundario">
                            <a routerLink="">
                                
                            </a>
                        </li>
                    </ul>
                </li>

...
...

here is the menu, if i click on white section the menu still shown, i need to clic the 3 bars icon again to collapse it. How can i collapse it on click another element or white space?

Best regards!