There have been numerous instances where a similar question has been raised, but I am unable to make this work. Despite looking at various answers such as this one on Stack Overflow that don't seem to work for most users. While this may not be specifically an Angular issue, I am attempting to resolve it within my ng app.
I want the link to function normally when clicked. Moreover, I also want the item containing the link to be double-clickable to open the link in a split area beside the router-outlet. Therefore, in my navigation menu, I have:
<li *ngIf="propertiesTabVisible" class="nav-item tab-nav-item"
[routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'
(dblclick)="toggleTab('/properties/' + sessionId)">
<a class="nav-link" [routerLink]='["/properties", sessionId]'
[class.disabled]="(propertiesLinkDisabled | async)"
(click)="navigateWithDelay('/properties/' +sessionId)">
<mat-icon class="tab-nav-item-icon">assignment</mat-icon>
</a>
</li>
And in the component.ts file:
private block = true;
private isCancelled = false;
private delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
private async sleepExample(url: string) {
await this.delay(200);
if (!this.block) {
this.router.navigate([url]);
}
}
navigateWithDelay(url: string) :boolean {
this.block = true;
this.isCancelled = false;
this.sleepExample(url).then(() => {
if (!this.isCancelled) {
this.block = false;
}
});
return false;
}
toggleTab(url: string) {
this.isCancelled = true;
toggleTabVisibility(url);
}
However, despite both handlers being called and functioning as expected, the link propagation still occurs upon clicking. How can I prevent this propagation in the click handler?