0

I need to create a component, where you don't have the navigation on top included, but I don't know how. I read, that every component you create is a child component of the appcomponent. In the app.component.html it is definded, that the navigation is on top and then comes the content. Also the component needs to be accessed over a route defined in app-routing.module.ts. Can anyone help?

app.component.html:

<app-navigation></app-navigation>

<div id="content">
  <router-outlet></router-outlet>
</div>
Piyush Jain
  • 1,895
  • 3
  • 19
  • 40
Rittden
  • 3
  • 3
  • please check this https://stackoverflow.com/questions/43118592/angular-2-how-to-hide-nav-bar-in-some-components – Piyush Jain Jan 16 '20 at 06:55
  • 1
    Instead of using `app-navigation` in `app.component`, include it in individual routes so that you can avoid it in places as per required. – MonkeyScript Jan 16 '20 at 06:55

1 Answers1

0

So basically you'll need a way to communicate back from child-component to parent-component.

Angular provides a way, using the Output decorator and EventEmitter. In the child component declare a property, something like

  @Output() 
  hideTopMenu = new EventEmitter();

and in the ngOnInit of child-component you may write

this.hideTopMenu.emit(true);

In the router-outlet of parent component, handle the (activate) event,

<router-outlet (activate)="onActivate($event)"></router-outlet>

The activate method would go like this

//the reference of current component is provided to the method.
onActivate(componentReference)
{
//check if this component had the output-emitter.
 if(componentReference.hideTopMenu)
 {
  componentReference.hideTopMenu.subscribe((data) => {
   if(data)
   {
     // hide menu logic may go here, maybe you set a boolean value and on template you set *ngIf on menu.
   }
  })
}
}

Thanks.

Obaid
  • 2,563
  • 17
  • 15