How can Angular hide a global component when a particular route is accessed?

Question

How can Angular hide a global component when a particular route is accessed?

Is it possible to hide a global component in Angular when a specific route is opened?

For instance, consider the following code:

app.component.html

<app-header></app-header>

<app-banner></app-banner> <!-- Global Component I want to hide -->

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

app-routing.module.ts

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import { StudentListComponent } from './Components/StudentList/StudentList.component';
import { SchoolMottoComponent } from './Components/SchoolMotto/SchoolMotto.component';

const routes: Routes = [
    {path: 'StudentList', component: StudentListComponent },
    {path: 'SchoolMotto', component: SchoolMottoComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }
export const routingComponents = [StudentListComponent, SchoolMottoComponent]

In this scenario, when viewing the StudentList Component, the URL defaults to localhost4200:/StudentList and similarly for SchoolMotto it becomes localhost4200:/SchoolMotto.

When a student is clicked within the StudentListComponent, the URL changes to something like this: localhost4200:/StudentList/view/cf077d79-a62d-46e6-bd94-14e733a5939d showing details of that student.

The requirement is to hide the global banner component only when the URL includes localhost4200:/StudentList/view/cf077d79-a62d-46e6-bd94-14e733a5939d. Is there a way to achieve this?

Proposed solution:

app.component.html

<app-header></app-header>

**<app-banner *ngIf="router != '/StudentList/view/'"></app-banner> <!-- Global Component I want to hide -->**

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

Is this achievable? If so, how can it be implemented?

javascript angular angular-ui-router angular7-router

Answer 1

Answer №1

If you find yourself in the StudentList/view scenario, consider utilizing event emitter or subject to trigger an event that will allow you to hide the banner using ngIf.

Within your StudentList component.ts file:

export class StudentList {
    bannerSubject: Subject<any> = new Subject<any>();
    
    ngOnInit() {
         bannerSubject.next(true);
    }
}

By subscribing to this in your parent component, you can easily control the visibility of the banner.

Answer 2

If you find yourself in the StudentList/view scenario, consider utilizing event emitter or subject to trigger an event that will allow you to hide the banner using ngIf.

Within your StudentList component.ts file:

export class StudentList {
    bannerSubject: Subject<any> = new Subject<any>();
    
    ngOnInit() {
         bannerSubject.next(true);
    }
}

By subscribing to this in your parent component, you can easily control the visibility of the banner.

Answer 3

Answer №2

Utilize component interaction and a service to achieve this goal

Implement Rxjs Observables for help in the process

Emit an event once you reach the student view component, then receive and handle that event in the app component to change the view condition

Create a New Service:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class RouteService {

  private routeChangedSource = new Subject<string>();

  // Observable string streams
  routeChanged$ = this.routeChangedSource.asObservable();

  // Service message commands
  changeRoute(mission: string) {
    this.routeChangedSource.next(mission);
  }
}

Student View Component.

import { Component }          from '@angular/core';

import { routeService }     from './mission.service';

@Component({
})
export class MissionControlComponent implements ngOnInit{
  constructor(private routeService: routeService) {}

  ngOnInit() {
    this.routeService.changeRoute(mission);
  }
}

App Component:

import { Component, Input, OnDestroy } from '@angular/core';

import { RouteService } from './route.service';
import { Subscription }   from 'rxjs';


export class AppComponent implements OnDestroy {
  studentView = false;
  constructor(private routeService: RouteService) {
    this.subscription = routeService.routeChanged$.subscribe(
      value => {
        this.studentView = true;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Update your App Component as follows:

<app-header></app-header>

<app-banner *ngIf="!studentView"></app-banner>

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

Answer 4

Utilize component interaction and a service to achieve this goal

Implement Rxjs Observables for help in the process

Emit an event once you reach the student view component, then receive and handle that event in the app component to change the view condition

Create a New Service:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class RouteService {

  private routeChangedSource = new Subject<string>();

  // Observable string streams
  routeChanged$ = this.routeChangedSource.asObservable();

  // Service message commands
  changeRoute(mission: string) {
    this.routeChangedSource.next(mission);
  }
}

Student View Component.

import { Component }          from '@angular/core';

import { routeService }     from './mission.service';

@Component({
})
export class MissionControlComponent implements ngOnInit{
  constructor(private routeService: routeService) {}

  ngOnInit() {
    this.routeService.changeRoute(mission);
  }
}

App Component:

import { Component, Input, OnDestroy } from '@angular/core';

import { RouteService } from './route.service';
import { Subscription }   from 'rxjs';


export class AppComponent implements OnDestroy {
  studentView = false;
  constructor(private routeService: RouteService) {
    this.subscription = routeService.routeChanged$.subscribe(
      value => {
        this.studentView = true;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Update your App Component as follows:

<app-header></app-header>

<app-banner *ngIf="!studentView"></app-banner>

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

Answer 5

Answer №3

<app-header></app-header>

<app-banner *ngIf="myService.hideGlobalComp"></app-banner> <!-- This is the Global Component that will be hidden when condition is met -->

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

in the ts file:

onCellClicked($event) { // Add this code to where you need it in your method 

    this.route.parent.url.subscribe(urlPath => {
      this.url = urlPath[urlPath.length - 1].path;
    });

   if(this.url === 'StudentList/view') {
  this.myService.hideGlobalComp = true;
}

}

}

Answer 6

<app-header></app-header>

<app-banner *ngIf="myService.hideGlobalComp"></app-banner> <!-- This is the Global Component that will be hidden when condition is met -->

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

in the ts file:

onCellClicked($event) { // Add this code to where you need it in your method 

    this.route.parent.url.subscribe(urlPath => {
      this.url = urlPath[urlPath.length - 1].path;
    });

   if(this.url === 'StudentList/view') {
  this.myService.hideGlobalComp = true;
}

}

}

Answer 7

Answer №4

To implement this in your TypeScript file, follow these steps:

Create a new variable called router: string;
In the constructor, add the following code snippet:

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

Then, use the same code in your HTML file. If you encounter any issues, feel free to reach out for assistance.

Answer 8

To implement this in your TypeScript file, follow these steps:

Create a new variable called router: string;
In the constructor, add the following code snippet:

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

Then, use the same code in your HTML file. If you encounter any issues, feel free to reach out for assistance.

How can Angular hide a global component when a particular route is accessed?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Updating a connected model in Sequelize using another model

Modules failing to load in the System JS framework

Angular 10 experiences issues with JWT Helper service causing errors

Exploring the new features of utilizing buttons with the onClick method in the updated nextJS version 14.1.3

Discovering the parameter unions in Typescript has revolutionized the way

Navigating with Node.js and angular

When scrolling, dynamically change the background color by adding a class

Setting up grunt-contrib-nodeunit to generate JUnit XML output: a step-by-step guide

Only line breaks are permitted in Mustache.js, all other HTML characters are escaped

Storing intricate items in a JavaScript database can be tricky. Using JSON.stringify() can sometimes lead to unexpected errors

I am looking to showcase images beside individuals' names or photos on my website in a vertical arrangement, similar to how it is done on Facebook

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

The browser is struggling to interpret the incorrect HTML content

Removing an element in Vue.js

Ways to determine if a website is being accessed from a mobile device or a computer without relying on TeraWurfl technology

The issue with HTML where the header and footer elements are continuously repeating when

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

What is the integration between redux and next.js like?

Regularly updating a book's interactive pages with turn.js technology

Issue with CasperJS: The function this.waitForUrl is not defined and is causing an error