Toggle routeLink in angular 4 - angular2-routing

Question

I'm creating a web app that will have a side menu loaded from another page in angular 4.
My menu-button with routerLink is defined in here.
<a class="menu-button"routerLink="/menu">
<div class="menu" >
<div class="bar" id="bar-1"></div>
<div class="bar" id="bar-2"></div>
<div class="bar" id="bar-3"></div>
</div>
</a>
The navbar will be visible even when the menu is open, and I was wondering if there's a way in angular 4 to toggle the routerLink from "/menu" to "/home" when the menu is open.

Answer 1

I just had the need to toggle between routes and the app root route. I added that capability with the following directive:
import { Directive, HostListener, Input, Self } from '#angular/core';
import { RouterLink, Router } from '#angular/router';
/**
* This directive adds the ability to toggle a route with Angular's
* {#link RouterLink} directive.
*
* ### Example:
* ```html
* <button routerLink="/my-path" routerLinkToggle></button>
* ```
* The example above creates a toggle button that navigates between
* `http://localhost/my-path` and `http://localhost`.
*/
#Directive({
selector: '[routerLinkToggle]'
})
export class RouterLinkToggleDirective {
/**
* The {#link RouterLink.onClick} method.
*/
private readonly _onClick: () => boolean;
/**
* Navigation commands.
*/
private commands: any[] = [];
constructor(#Self() private routerLink: RouterLink,
private router: Router) {
// Keep a reference to the original `routerLink.onClick` method.
this._onClick = this.routerLink.onClick;
// Replace the `routerLink.onClick` method with a dummy method.
// This is needed because the order in which directives on the
// same host element are executed is undefined. By overwriting
// routerLink's onClick method but keeping a reference to it, we
// now have control over when it will be called.
this.routerLink.onClick = () => true;
}
/**
* Set the path of the route that you want to toggle to. If no path
* is provided, the directive navigates to the root of the app.
*/
#Input()
set routerLinkToggle(commands: any[] | string) {
if (commands != null) {
this.commands = Array.isArray(commands) ? commands : [commands];
} else {
this.commands = [];
}
}
#HostListener('click')
onClick() {
if (this.router.isActive(this.routerLink.urlTree, true)) {
this.router.navigate(this.commands);
} else {
// Call the `_onClick` method within its original `routerLink` conext.
this._onClick.call(this.routerLink);
}
}
}

Answer 2

Not sure if answers your question,
But you may use routerLinkActive directive to check which route is active and based upon that hide or show respective links.
Check below implementation,
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>
<hr />
<a routerLink="/home" [ngClass]="{'hide': !menu.isActive}"
routerLinkActive #home="routerLinkActive" >Home</a>
<a routerLink="/menu" [ngClass]="{'hide': !home.isActive}"
routerLinkActive #menu="routerLinkActive" >Menu</a>
<hr />
<router-outlet></router-outlet>
`,
styles:[
`
.hide{
display: none;
}
`
]
})
class AppComponent { name = 'Angular'; }
Here is the Plunker!!