title: Angular: Show Only the Component and Hide Header and Footer
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/xsvuc.png" rel="nofollow noreferrer">Component Picture in Green Border</a></p>
  <p>Using the following solution partially works, however sometimes the header and footer still show up few seconds, while the real component is loading.</p>
  <pre><code>:host{
    background: #4285f4;
    color:#fff;
    position: fixed;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
  }
  </code></pre>
  <p><a href="https://stackoverflow.com/questions/51332847/how-to-get-angular-component-to-take-full-height-of-screen">How to get Angular component to take full height of screen</a></p>
  <p>This is the Product Component html:</p>
  <pre><code>&lt;div class=&quot;whole-container&quot;&gt;
    &lt;div class=&quot;product-data&quot;&gt;
      &lt;div&gt;{{product?.productNumber}}&lt;/div&gt;
      &lt;div&gt;{{product?.productName}}&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      Hello
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>