CODEWITHSUNDEEP
twitter-bootstrapangulartypescripttwitter-bootstrap-3bootstrap-4
Natarajan Ganapathi
Natarajan Ganapathi

Reputation: 595

Bootstrap style not working against Angular2 components

Bootstrap style not working against Angular2 components.

in the following angular2 component not working as bootstrap fluid container in ui. in works will if I use 'container-fluid' inside the component with div element.

Ex: (Not working)

@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>

Upvotes: 4

Views: 3042

Answers (1)

Eric Martinez
Eric Martinez

Reputation: 31787

That's because browsers don't recognize those components as HTML elements, so they don't apply the default styles on them. You have to add display:block to the component and it will render correctly.

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

That will work. You can read this issue where is being discussed to add display:block by default.

See this plnkr with an example working. To see the difference, remove the styles property from the component.

Upvotes: 3

Related Questions