How to inherit styling within Angular 2 Component Tag

Question

I am trying to add a component to my dashboard. I am trying to set up reusable code. The problem is that when I put the same exact code inside a component tag.

<members-online></members-online> 

and put it inside a component the styling goes away. See image below.

Dashboard html

<div class="animated fadeIn">
<div class="row">
    <div class="col-sm-6 col-lg-3">
  <div class="card card-inverse card-primary">
    <div class="card-block pb-0">
      <div class="btn-group float-right" dropdown="" placement="bottom right">
        <button class="btn btn-transparent dropdown-toggle p-0" dropdowntoggle="" type="button" aria-haspopup="true">
          <i class="icon-settings"></i>
        </button>
        <!---->
      </div>
      <h4 class="mb-0">9.823</h4>
      <p>Members online</p>
    </div>
    <div class="chart-wrapper px-1" style="height:70px;"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
      <canvas basechart="" class="chart" width="236" height="70" style="display: block; width: 236px; height: 70px;"></canvas>
    </div>
  </div>
</div>
<members-online></members-online>
</div>

Members Online Component

import { Component } from '@angular/core';

@Component({
selector: 'members-online',
template: `<div class="col-sm-6 col-lg-3">
  <div class="card card-inverse card-primary">
    <div class="card-block pb-0">
      <div class="btn-group float-right" dropdown="" placement="bottom right">
        <button class="btn btn-transparent dropdown-toggle p-0" dropdowntoggle="" type="button" aria-haspopup="true">
          <i class="icon-settings"></i>
        </button>
        <!---->
      </div>
      <h4 class="mb-0">9.823</h4>
      <p>Members online</p>
    </div>
    <div class="chart-wrapper px-1" style="height:70px;"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
      <canvas basechart="" class="chart" width="236" height="70" style="display: block; width: 236px; height: 70px;"></canvas>
    </div>
  </div>
</div>`
})
export class MembersOnlineComponent {   
}

In chrome when I remove the

<members-online></members-online>

tags the styling is fixed.

The Left Image is my div outside the component tag the right one is the exact code within the component tag. I would think that they should render the same.

Update: Adding a style tag to my component does show the box

styles: [':host {border: 1px solid black; width: 100%}']

Without the 100% width it still does not

styles: [':host {display: block;  border: 1px solid black;}']

Answer 1

Ok, so this is what I did. Thanks to @Julia I found out that "Angular treats the < members-online > tag as an extra div.

So going from that I simply removed my extra div from the template

<div class="card card-inverse card-primary">
    <div class="card-block pb-0">
      <div class="btn-group float-right" dropdown="" placement="bottom right">
        <button class="btn btn-transparent dropdown-toggle p-0" dropdowntoggle="" type="button" aria-haspopup="true">
          <i class="icon-settings"></i>
        </button>
        <!---->
      </div>
      <h4 class="mb-0">9.823</h4>
      <p>Members online</p>
    </div>
    <div class="chart-wrapper px-1" style="height:70px;"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
      <canvas basechart="" class="chart" width="236" height="70" style="display: block; width: 236px; height: 70px;"></canvas>
    </div>
  </div>

then ended up putting the members-online tag inside my div columns

<div class="col-sm-6 col-lg-3">
  <members-online></members-online>
</div>

Answer 2

Angular adds one extra div for members-online as a parent of your component html and it might break your css. You can always style this div with :host selector with you component css file.

:host {
  display:block;
}