CODEWITHSUNDEEP
angulartypescriptangular10
user13889515
user13889515

Reputation:

Angular: Show Only the Component and Hide Header and Footer

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>

Upvotes: 0

Views: 3195

Answers (2)

Anton Marinenko
Anton Marinenko

Reputation: 2992

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

Upvotes: 0

andsilver
andsilver

Reputation: 5972

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.

Upvotes: 1

Related Questions