Isolate bootstrap CSS to one angular component?

Question

Is it possible to isolate Bootstrap's css file to one Angular component?

When including the file globally in styles.css or in .angular-cli.json, the global styles are causing issues with other components that should not be using bootstrap. I have tried to do this by importing it from the component's CSS file but the styles do not seem to render properly...

I am using Angular 5 and Angular Cli 1.7.2.

Vikas · Accepted Answer · 2018-03-09 17:20:45Z

2

you can explicitly set the encapsulation strategy using the encapsulation property.Set it to ViewEncapsulation.Native for your case

@Component({
// ...
encapsulation: ViewEncapsulation.Native,
styles: [
  // ...
]
})
export class HelloComponent {
// ...
}

Native - styles from main HTML do not propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only. Refer this View Encapsulation.

answered Mar 9, 2018 at 17:20

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

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

7 Comments

mjones Over a year ago

When trying this, the component does not render at all, any ideas?

Vikas Over a year ago

That should not happen what is the error you get on browser's console if possible share your code?

mjones Over a year ago

Ah looks like it's not supported in the newest version of firefox... TypeError: hostEl.createShadowRoot is not a function. Any other way to accomplish this?

Vikas Over a year ago

This approach worked for me, I couldn't find any other approach.

Antonio Esposito Over a year ago

Use ---> encapsulation: ViewEncapsulation.ShadowDom

|

Collectives™ on Stack Overflow

Isolate bootstrap CSS to one angular component?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related