Bootstrap style does not work with Angular2 components

Question

Bootstrap style does not work with Angular2 components.

in the next Angular2 component, which does not work as a boot container for bootstrap in ui. in works, if I use a "container-liquid" inside a component with a div element.

Example: (does not work)

@Component({
    selector: 'gn-app',
    viewProviders: [],
    moduleId: module.id,
    template:
        `<gn-layout class="container-fluid"
        (window:resize)="gnOnResize($event)"
        </gn-layout>
    `,
   directives: [ROUTER_DIRECTIVES, LayoutComponent]
})

Working code

<gn-layout>
   <div class="container-fluid">
      <div class"row">
          <gn-container></gn-container>
      </div>
   </div>
</gn-layout>

Answer 1

This is because browsers do not recognize these components as HTML elements, so they do not apply default styles to them. You must add display:blockto the component and it will display correctly.

@Component({
    styles : [`
        :host {
            display: block;
        }
    `]
})

. issue, , display:block .

. plnkr . , styles .