CODEWITHSUNDEEP
javascriptangular
yavg
yavg

Reputation: 3051

How to hide / show a component according to the current component?

I am something new in angular, and know the answer my problem I am sure that it will make me learn a lot. in my default component the MainComponent is loaded in my <router-outlet>, at this level both the menu and the footer are displayed. I want ONLY to show up when I'm in any component that is NOT MainComponent in my case in AnotherComponent should be shown, but if I go back to MainComponent it will not. How can I do this? I've tried with ngIf and it does not work for me (I think it goes beyond this)

this is part of my code:

<menu (setAnimal)='setAnimal($event)' ></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>


@Component({
  selector: 'main',
  template: '<div><a routerLink="/another">anotherComponent</a></div>',
  styles: [`div {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
      background-repeat: no-repeat;
      background-size: 100%;
    background-position: center;
      background-size: cover;
}`]
})

  @Component({
    selector: 'another',
    template: '<div><a routerLink="/">main</a></div>',
    styles: [`div {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      background-size: cover;
      }`]
  })

this is my live code:

https://stackblitz.com/edit/angular-qcxnln

thanks

Upvotes: 0

Views: 75

Answers (3)

invernomuto
invernomuto

Reputation: 10211

If I understand well, if you inject the router in your AppComponent:

constructor(private router: Router){
    router.events.subscribe(e => {
    if(e instanceof NavigationEnd){
      if(e.urlAfterRedirects != '/'){
        this.headerFooterVisible= true;
      }else{
        this.headerFooterVisible= false;
      }

    }
  });

You could subscribe to the route events and so check if you are in the root path. Then with a couple of ngIf:

<menu (setAnimal)='setAnimal($event)' *ngIf="headerFooterVisible"></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>
<footer *ngIf="headerFooterVisible"></footer>

StackBlitz

Upvotes: 2

katwhocodes
katwhocodes

Reputation: 2268

you can put Menu and Footer in Another Component, make this as an page template. For the pages you want to display like Another component (display menu and footer), use 'children'

 const appRoutes: Routes = [
    { path: '', component: MainComponent },
    { 
      path: 'another',
      component: AnotherComponent,
      children: [
         path: 'something',
         component: SomeComponent
      ]
  }
];

Upvotes: 0

Sunil Kashyap
Sunil Kashyap

Reputation: 2984

get the component name in onActivate hook of router-outlet using obj.constructor.name and compare accordingly.

working sample = https://stackblitz.com/edit/angular-r8pnot

Upvotes: 0

Related Questions