Esta es parte de mi código, estoy usando Typescript y Angular, solo deseo que cuando haga clic fuera de la barra de navegación. se contraiga a su posición normal el botón, y se oculte lo demás, o sea la barra de navegación.
export class NavMenuComponent {
constructor(private _accountService: AccountService, private _router: Router) { }
isExpanded = false;
text = 'Close Drawer';
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
this.text = this.isExpanded ? 'Open Drawer' : 'Close Drawer';
}
logout() {
this._accountService.logout();
this._router.navigate(['/']);
}
estaLogeado() {
return this._accountService.estaLogeado();
}
}
este es parte del HTML estoy usando un botón que al momento en el que la ventana se hace más pequeña, se muestra ese botón que al hacer clic en el, se expande la barra de navegación, pero solo se contrae al hacer clic de nuevo en el mismo botón.
<header>
<nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'>
<div class="container">
<a class="navbar-brand" [routerLink]='["/"]'><span>MÓDULO</span> ALMACÉN</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation"
[attr.aria-expanded]="isExpanded" (click)="toggle() *ngIf="(isHandset | async)!.matches">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'>
<ul class="navbar-nav flex-grow">
<li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]'>
<a class="nav-link text-dark" [routerLink]='["/almacen"]'>Catálogo Almacén</a>
</li>
<li *ngIf="!estaLogeado()" class="nav-item" [routerLinkActive]='["link-active"]'>
<a class="nav-link text-dark" [routerLink]='["/register-login"]' (click)='collapse()'>
<span class="glyphicon glyphicon-th-list"></span> Register/login
</a>
</li>
<li *ngIf="estaLogeado()" class="nav-item" [routerLinkActive]='["link-active"]'>
<a class="nav-link text-dark" (click)='logout()'>
<span class="glyphicon glyphicon-th-list"></span>Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>