Issues in rendering css/bootstrap classes in angular2

Question

I am having some issues in CSS/Bootstrap work when it is rendered in a angular2 component.

when I try to render the CSS/html contents in Index.html file (with proper references for CSS,JS) the application/functionality works fine. But when the same html contents along with CSS classes is rendered in the angular2 component, it doesn't work.

Based on the searches on internet I have done all these changes but nothing makes it working. I have added encapsulation: ViewEncapsulation.None for that component, still the CSS functionality doesn't work along with angular 2.

also the order of JS references file are placed in the following order

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

I have replicated the issue and checked into Github url

can somebody help me with this issue?

css will work automatically, with out any additional configuration. You just add the ref link on the index.html If you need to include jsyou may go though my answer. — Aswin KV
– Aswin KV, Commented Oct 1, 2016 at 19:32

Community · Accepted Answer · 2017-05-23 12:17:43Z

2

This is because we cant simply add js files in angular 2 by adding the ref link, try this stack over flow solution

How to use jQuery with Angular2?

For Bootstrap you can use ng-bootstrap https://www.npmjs.com/package/ng2-bootstrap

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Oct 1, 2016 at 17:02

Aswin KV

1,7602 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issues in rendering css/bootstrap classes in angular2

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related