0

How do I only show the Angular Component on a page, and hide everything else including the header and footer from the angular component? The header and footer are automatically placed in all our components, we don't even code for them in html.

Component Picture in Green Border

Using the following solution partially works, however sometimes the header and footer still show up few seconds, while the real component is loading.

:host{
  background: #4285f4;
  color:#fff;
  position: fixed;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

How to get Angular component to take full height of screen

This is the Product Component html:

<div class="whole-container">
  <div class="product-data">
    <div>{{product?.productNumber}}</div>
    <div>{{product?.productName}}</div>
  </div>
  <div>
    Hello
  </div>
</div>

2 Answers2

1

You can remove your header and footer from the root level and include them only in the pages where you need to show them.

Or you could define a service which you can use to decide wheather you will show the header and footer or not. You could you ActivatedRoute or Router inside the service for tracking the current page path. And you can use *ngIf condition in your component having the header and footer.

critrange
  • 5,652
  • 2
  • 16
  • 47
0

Just use *ngIf directive for your components... or place your router-outlet to the upper level and recognize page without header/footer. it is not working

Community
  • 1
  • 1
Anton Marinenko
  • 2,749
  • 1
  • 10
  • 16
  • what do I use NgIf with which condition? and I just write on top of components? –  Jul 11 '20 at 08:31