title: A class from a child component is not applied correctly
body: <p>I'm doing a web application using Angular 8 and <a href="https://adminlte.io/themes/v3/index.html" rel="nofollow noreferrer">AdminLTE3</a> as my template.</p>
  
  <p>I want to implement the <a href="https://adminlte.io/docs/3.0/components/cards.html" rel="nofollow noreferrer">Loading Style</a> for a card, this code needs to be placed before the .card closing tag.</p>
  
  <pre><code>&lt;div class="overlay"&gt;
    &lt;i class="fas fa-2x fa-sync-alt fa-spin"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Working example:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cyWYr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cyWYr.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!-- Main content --&gt;
  &lt;section class="content"&gt;
  
    &lt;!-- Card --&gt;
    &lt;div class="card"&gt;
  
      &lt;div class="card-body"&gt;
        ...
      &lt;/div&gt;
      &lt;!-- /.card-body --&gt;
  
      &lt;!-- Loading Style --&gt;
      &lt;div class="overlay"&gt;
        &lt;i class="fas fa-2x fa-sync-alt fa-spin"&gt;&lt;/i&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;!-- /.card --&gt;
  
  &lt;/section&gt;
  &lt;!-- /.content --&gt;
  </code></pre>
  
  <p><strong>Not working example:</strong></p>
  
  <p>When I move the Loading Style code to a reusable component and now this component is a child, the Loading Style is not applied correctly.</p>
  
  <p><a href="https://i.stack.imgur.com/iutsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iutsF.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!-- Main content --&gt;
  &lt;section class="content"&gt;
  
    &lt;!-- Card --&gt;
    &lt;div class="card"&gt;
  
      &lt;div class="card-body"&gt;
        ...
      &lt;/div&gt;
      &lt;!-- /.card-body --&gt;
  
      &lt;!-- Loading Style --&gt;
      &lt;app-card-loading-state [isLoading]="true"&gt;&lt;/app-card-loading-state&gt;
  
    &lt;/div&gt;
    &lt;!-- /.card --&gt;
  
  &lt;/section&gt;
  &lt;!-- /.content --&gt;
  </code></pre>
  
  <p><strong>CardLoadingStateComponent</strong></p>
  
  <pre><code>@Component({
    selector: 'app-card-loading-state',
    template: '
               &lt;div class="overlay" *ngIf="isLoading"&gt;
                 &lt;i class="fas fa-2x fa-sync-alt fa-spin"&gt;&lt;/i&gt;
               &lt;/div&gt;
             ',
  })
  export class CardLoadingStateComponent {
    @Input() isLoading = false;
  }
  </code></pre>
  
  <p>I have tried to apply <code>encapsulation: ViewEncapsulation.None</code> and <code>host: {class: 'card'}</code>, but, no luck.</p>
  
  <p>--</p>
  
  <p>The <code>overlay</code> class is located <a href="https://adminlte.io/themes/dev/AdminLTE/dist/css/adminlte.min.css" rel="nofollow noreferrer">here</a>, inside of the template's CSS. I inject that file in my <code>angular.json</code>.</p>
  
  <pre><code>"styles": [
        "node_modules/admin-lte/dist/css/adminlte.min.css",
        "src/styles.scss"
            ],
  </code></pre>
  
  <p>--</p>
  
  <p>My goal is to apply the CSS of the CardLoadingStateComponent correctly when this is a child component.</p>