Issue
I have a custom side-nav
component.
Which can be used link this:
<button (click)="sideNav.open()">Menu</button>
<side-nav #sideNav>
<a routerLinkActive="active" routerLink="/">Home</a>
<a routerLinkActive="active" routerLink="/products">Products</a>
<a routerLinkActive="active" routerLink="/about">About</a>
<a routerLinkActive="active" routerLink="/contact">Contact</a>
</side-nav>
Clicking the Menu button opens the side nav with contents inside the side-nav
tag.
I want to automatically close the side-nav when a user clicks on any of the links.
Can anyone please guide how to add a click handler for all links(and buttons) in my SideNavComponent that automatically closes the ‘side-nav’
Below is my component:
import { Location } from "@angular/common";
import { Component, Input, Renderer2 } from '@angular/core';
@Component({
selector: 'side-nav',
templateUrl: './side-nav.component.html'
})
export class SideNavComponent {
@Input() isOpen: boolean = false;
@Input() enabled: boolean = true;
@Input() extraClasses: string = '';
constructor(private location: Location,
private renderer: Renderer2) {
}
ngOnInit() {
}
open() {
this.isOpen = true;
window.addEventListener('popstate', this.onHardwareBackButton, { passive: true });
this.location.go('side-nav');
this.renderer.addClass(document.body, 'noscroll');
}
close(goBack: boolean = false) {
this.isOpen = false;
window.removeEventListener('popstate', this.onHardwareBackButton);
this.renderer.removeClass(document.body, 'noscroll');
if (goBack) {
window.history.back();
}
}
onHardwareBackButton = () => {
this.close();
window.removeEventListener('popstate', this.onHardwareBackButton);
};
}
Template
<ng-container *ngIf="enabled">
<nav id="sidebar-nav" [swipe]="true" (swipeLeft)="close(true)" [ngClass]="{'close':!isOpen,'open':isOpen}" class="{{extraClasses}}">
<ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</nav>
<div id="nav-screen-overlay" (click)="close(true)"></div>
</ng-container>
<ng-container *ngIf="!enabled">
<ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</ng-container>
<ng-template #contentTpl><ng-content></ng-content></ng-template>
I know I can add (click)="sideNav.close()"
on all of the links but I want to do it automatically when user clicks on any of the clickable item e.g. links or buttons.
Solution
You can try this, But I wonder why you can’t simply add click
event in the html
itself, If repeating is your problem then create an array of links and loop(ngFor) it.
allListeners: (() => void)[] = [];
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit() {
const myComponent = this.elementRef.nativeElement as HTMLElement;
const clickableElements = myComponent.querySelectorAll("a, button");
clickableElements.forEach(eachElem => {
const listener = this.renderer.listen(eachElem, "click", () => {
console.log("Element clicked"); //Close sidenav
});
this.allListeners.push(listener);
});
}
ngOnDestroy() {
//Remove click listeners
this.allListeners.forEach(listener => listener())
}