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.

Answer 1

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.