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

Error message "process.nextTick(() => { throw err; });" encountered while attempting to build an Angular image in a Docker environment

Transferring a variable from an Angular 2 constructor into the template via the then statement

Guide on extracting just the key and its value from a Filter expression in a DynamoDB Query using Typescript

Issues with ng2-pdf-viewer arising in Angular versions 12 and above

Issue: The JSX element 'X' is missing any constructors or call signatures

When the appdir is utilized, the subsequent export process encounters a failure with the error message "PageNotFoundError: Module for page /(...) not

Does the Angular library "ngx-paypal" have the capability to process recurring payments?

Initial values are not retained for nested form components upon submission

Setting the date of the NgbDatePicker through code

Dealing with Incoming HTML Content from Backend in Angular 5

Is it necessary to include @types/ before each dependency in react native?

Issue: Unable to locate control with the specified name

"Continue to shine until the rendering function displays its source code

Challenge with module declaration in index.d.ts during upgrade from Angular 8 to 9 (excluding Material)

Instructions for incorporating a TypeScript type into a Prisma model

Is it possible to use AngularJS promise scheduling with `async`/`await` syntax?

Unforeseen results arise when using the ng-if directive on a DIV element within an Angular context

Can TypeScript ascertain the object's type dynamically based on the key of its proxy name?

Issues encountered when setting up a Context Provider in React using TypeScript

Retrieve JSON data from a 404 response using the Http.get() method