How do I hide an Agular component on all routes that correspond to a certain pattern?

Question

I am working on an e-commerce app who's front-end is made in Angular 13.

The UI has a sidebar which I do not want to display on the product details page.

For this purpose, in app\app.component.ts I have:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'E-commerce';
  constructor(private router: Router) {}

  ngOnInit() {}

  /**
   * Check if the router url contains the specified route
   *
   * @param {string} route
   * @returns
   * @memberof AppComponent
   */
   hasRoute(route: string) {
    return this.router.url.includes(route);
  }
}

In app\app.component.html:

The problem

For a reason I have been unable to understand, this solution fails, and the sidebar is displayed anywhere on the app.

What am I doing wrong?

user_13641287 · Answer

HTML ^^^

constructor() {}
public notProductDetails(): void {
    return !window.location.pathname.startsWith('/products/show/');
}

TS

Simply use the window location to pull the pathname instead of injecting the router - remove the constructor injection. Also no need to pass in a prop value there, because you only have a single string you are asserting.

user_6393934 · Answer

In that way, you are running that value just one time. In order to achieve this you can subscribe to the router events like this:

public showBar: boolean = true;

constructor(private readonly router: Router) {
   this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe(({ urlAfterRedirects }: NavigationEnd) =>
        this.showBar = this.hasRoute(urlAfterRedirects)
      );
}

In this way, you are updating the showBar value every time the navigation end.

user_4512005 · Answer

In case someone may find it useful, here is the final solutions I have applied to this problem:

In app\app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title: string = 'E-commerce';
  constructor(private router: Router) {}

  ngOnInit() {}

  routeIncludesNot(route: string) {
    return !window.location.pathname.startsWith(route);
  }
}

In app\app.component.html I have:

See a "live demo" HERE.

How do I hide an Agular component on all routes that correspond to a certain pattern?

The problem

What am I doing wrong?

3 Answers