Toggle routeLink in angular 4

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.

Madhu Ranjan · Answer 1 · 2020-08-31T18:44:26.650

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!!

Sam Herrmann · Answer 2 · 2017-12-05T18:50:49.940

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);
        }
    }
}

Toggle routeLink in angular 4

2 Answers2