Angular: показать только компонент и скрыть верхний и нижний колонтитулы

Как показать только компонент Angular на странице и скрыть все остальное, включая верхний и нижний колонтитулы, от компонента angular? Верхний и нижний колонтитулы автоматически размещаются во всех наших компонентах, мы даже не кодируем их в html.

Изображение компонента в зеленой рамке

Использование следующего решения частично работает, однако иногда верхний и нижний колонтитулы все еще отображаются несколько секунд, пока загружается реальный компонент.

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

Как заставить компонент Angular занять всю высоту экран

Это HTML-код компонента продукта:

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