Angular how to hide a global component when a specific route is opened?

Question

I'm not sure whether this is possible or not in angular but I wanted to hide a global component when a specific route is opened.

Say for example I have the following:

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]

With this, its a given that when I want to view the StudentList Component, then the url by default becomes localhost4200:/StudentList and the same with SchoolMotto it becomes localhost4200:/SchoolMotto.

Within the StudentListComponent, is an ag-grid that displays list of students, and when you click one of those students the url becomes something like this: localhost4200:/StudentList/view/cf077d79-a62d-46e6-bd94-14e733a5939d and its another sub-component of SchoolList that displays the details of that particular student.

I wanted to hide the Global banner component when the url has something like that: localhost4200:/StudentList/view/cf077d79-a62d-46e6-bd94-14e733a5939d. Only when the user views the specific details of a student.

Something like this:

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 doable or not? If it is, how?

Ramesh Reddy · Accepted Answer · 2019-10-21T06:26:15.280

1

You could use event emitter or subject to emit an event when you're in StudentList/view and use ngIf to hide the banner.

In your StudentList component.ts :

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

subscribe to this in your parent component and you can easily hide the banner.

edited Oct 21 '19 at 06:26

answered Oct 21 '19 at 06:16

Ramesh Reddy

10,159
3
17
32

Edited my answer because your url can be dynamic – Ramesh Reddy Oct 21 '19 at 06:28
How do you do it using event Emitters? – Gashio Lee Oct 23 '19 at 05:07
see [this](https://alligator.io/angular/outputs-angular/) – Ramesh Reddy Oct 23 '19 at 09:47

score 1 · Answer 2 · answered Oct 21 '19 at 06:30

You can acheieve that with the help of component interation using a service

You will use the help of Rxjs Observables here

You will emit an event when you reach the student view component, then recieve that event in app component then change the view condition

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

Now, your App Component can be:

<app-header></app-header>

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

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

<app-footer></app-footer>

score -1 · Answer 3 · answered Oct 21 '19 at 06:20

<app-header></app-header>

<app-banner *ngIf="myService.hideGlobalComp"></app-banner> <!-- Global Component I want to hide -->

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

<app-footer></app-footer>

in the ts file:

onCellClicked($event) { // place into your method there you want. 

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

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

}

}

this URL part is a cf077d79-a62d-46e6-bd94-14e733a5939d is dynamic its change every time — upinder kumar, Oct 21 '19 at 06:21

score -1 · Answer 4 · answered Oct 21 '19 at 06:21

-1

In you ts file do like this.

add new variable router: string;
add in construction add this

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

Then in HTML use same code. Let me know if this does not work.

answered Oct 21 '19 at 06:21

Piyush Jain

1,895
3
19
40

why downvote.. check this url - https://stackoverflow.com/questions/47707225/hide-and-show-angular-4-component-depending-on-route, I provided same solution. – Piyush Jain Oct 21 '19 at 07:33
you are just down voting it without any comment. – Piyush Jain Oct 21 '19 at 07:34

Angular how to hide a global component when a specific route is opened?

4 Answers4