0

I am loading all my route via root component called AppComponent (located in app.component.ts) as follows:

app.component.html:

<app-header></app-header>

<div class="container">
  <div class="row">
    <div class="col-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

<app-footer></app-footer>

Everything is fine till now. But Now I want to load a LoginCompoent (at /login route) on entire page. Meaning there should is no header or footer, there should be just one component, LoginComponent loaded when I go to /login.

I know I can create a new root component which loads AppComponent or LoginComponent depending on the route. But I was wondering if there is a simple way to achieve this.

dasfdsa
  • 7,102
  • 8
  • 51
  • 93
  • Use a service to emit a boolean `BehaviorSubject` and hide your header/footer based on that value. You cant have a component outside root. – FAISAL Jul 03 '18 at 09:14
  • You can add `*ngIf*` at your app-header and app-footer components, but the best approach would be to separate your _in-app_ and _out-app_ components for many reasons. – korteee Jul 03 '18 at 09:15
  • Here is an example with regards to my previous comment: https://stackoverflow.com/a/46049546/1791913 – FAISAL Jul 03 '18 at 09:15
  • Thanks for the response. I am looking for some cleaner solution. Do you know how can I bootstrap second root component in angular? That would be a good clean solution – dasfdsa Jul 03 '18 at 10:32

1 Answers1

0

Well the right way, as far as I know, is to do two separate modules for auth components and core components. And in the app.component you will have only <router-outlet> that will display auth or core. In the core you place all the components that should be displayed in your current structure 

<app-header></app-header>

<div class="container">
  <div class="row">
    <div class="col-12">
    <router-outlet></router-outlet>
  </div>
 </div>
</div>

<app-footer></app-footer>

This way you will keep your app.component clean and you won't have any headache with the process.

Here's the general idea but I would recommend wrapping them into separate modules.

k.s.
  • 2,964
  • 1
  • 25
  • 27
  • I understand that. I had already mentioned that approach in my question. I prefer some cleaner approach. As an example, having second root component. – dasfdsa Jul 03 '18 at 10:31