Hiding the header on a specific route in Angular 6

Question

Hiding the header on a specific route in Angular 6

Attempting to hide the header for only one specific route

Imagine having three different routes: route1, route2, and route3.

In this scenario, there is a component named app-header.

The goal is to make sure that the app-header component is hidden when the user navigates to route1, while being visible on the other two routes.

Despite coming across various similar questions on stackoverflow, none of the solutions seemed to work

Seeking some assistance from fellow developers!

Provided below is the relevant code snippet:

app.component.ts

export class AppComponent implements OnInit {
    showHeader = true;

    constructor(
        private router: Router
    ) {
        this.router.events.subscribe(event => this.modifyHeader(event));
    }

    ngOnInit() {
    }

    modifyHeader(location) { // This method is called many times
        console.log(location.url); // This prints a loot of routes on console
        if (location.url === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }
}

app.component.html

<app-header *ngIf="showHeader"></app-header>
<router-outlet></router-outlet>

Angular version used: 6.1.4

angular typescript angular6

Answer 1

Answer №1

When it comes to identifying a specific route and having a solution in mind within the app component, my suggestion would be to implement router event filtering as shown below:

export class AppComponent implements OnInit {
    showHeader = true;

    constructor(
        private router: Router
    ) {
        this.router.events.pipe(
            filter(e => e instanceOf NavigationEnd)
        ).subscribe(event => this.modifyHeader(event));
    }

    ngOnInit() {
    }

    modifyHeader(location) { // This function gets called multiple times
        console.log(location.url); // Outputs various routes to console
        if (location.url === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }
}

Answer 2

When it comes to identifying a specific route and having a solution in mind within the app component, my suggestion would be to implement router event filtering as shown below:

export class AppComponent implements OnInit {
    showHeader = true;

    constructor(
        private router: Router
    ) {
        this.router.events.pipe(
            filter(e => e instanceOf NavigationEnd)
        ).subscribe(event => this.modifyHeader(event));
    }

    ngOnInit() {
    }

    modifyHeader(location) { // This function gets called multiple times
        console.log(location.url); // Outputs various routes to console
        if (location.url === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }
}

Answer 3

Answer №2

Enhance the functionality of the router outlet

<router-outlet  (activate)="updateHeader()"></router-outlet>

Include this in your constructor

router; 
constructor(private _router: Router ) {
      this.router = _router;
    }

The updateHeader function

updateHeader() { // This method is triggered multiple times
        console.log(this.router.ur); // A list of routes will be displayed on the console
        if (this.router.ur === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }

Please inform me if you encounter any difficulties.

Answer 4

Enhance the functionality of the router outlet

<router-outlet  (activate)="updateHeader()"></router-outlet>

Include this in your constructor

router; 
constructor(private _router: Router ) {
      this.router = _router;
    }

The updateHeader function

updateHeader() { // This method is triggered multiple times
        console.log(this.router.ur); // A list of routes will be displayed on the console
        if (this.router.ur === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }

Please inform me if you encounter any difficulties.

Answer 5

Answer №3

Implementing the solution provided by @Krishna is incredibly efficient in terms of performance, as this observable remains subscribed since it is located within the root AppComponent of the application.

Answer 6

Implementing the solution provided by @Krishna is incredibly efficient in terms of performance, as this observable remains subscribed since it is located within the root AppComponent of the application.

Hiding the header on a specific route in Angular 6

Answer №1

Answer №2

Answer №3

Similar questions

Delaying a request when a button is clicked in Angular using debounce

Implementing Authorization Headers in Angular for Secure HTTP Post Requests

How can I retrieve the index of an element within a 2D array using JavaScript when the array is displayed on a webpage?

Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

What is the process for running an Angular2 application on a mobile device during the development phase?

Encountering an ERROR with the message "Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError" while attempting to apply a filter to

Angular's innerHTML dilemma

Angular 2 select does not recognize the selected option

Refresh the page when scss file is saved

Sharing data between two components in an Angular2-Meteor application

Angular: Array in the template re-renders even if its length remains unchanged

Occasionally encountering missing modules with Vscode and NestJs

Tips for dynamically altering the data type of an object in Angular depending on a certain condition

Creating a form with multiple components in Angular 6: A step-by-step guide

Issue with MEAN app: unable to retrieve response from GET request

The Gatsby + Typescript project is reporting that the module with the name "*.module.scss" does not have any exported members

What could be causing the ion-item click to malfunction in Ionic 4 on iOS devices?

What are the best methods for protecting a soda?

The latest version of npm packages is not displayed when you hover over them in Visual Studio Code