Angular Tags disrupting CSS stylings

Question

I have a project being built with the Angular 2 framework. The custom angular tags ( <my-app> , <my-whatever-component> etc.) keep disrupting the css output. When the HTML is directly on the index.html file (not in any component whatsoever) the CSS loads alright.

I have debugged and have come to the certain conclusion that the custom angular tags are the cause of the issue.

What do i do to change this behavior? How can i make the custom Html tags vanish after the view is rendered ? This will prevent Hierarchical CSS rules from breaking.

Edit 1 : I forgot to mention the CSS is custom (Free bootstrap admin template thingy) so i can't (more like i don't want to) tweak it.

Answer 1

You need to set View Encapsulation Types, More information here

@Component({
   moduleId: module.id,
   selector: 'my-zippy',
   templateUrl: 'my-zippy.component.html',
   styles: [`
    .zippy {
      background: green;
    }
   `],
   encapsulation: ViewEncapsulation.None //No Shadow DOM at all. Therefore, also no style encapsulation.
})

EDIT

As a workaround you can use an attribute selector in your component like

selector: '[my-component]'

and then use it like

<div my-component>Hello My component</div>

This way you can skip component tags from your HTML and can apply hierarchical css.

Answer 2

Can you give an example through pluncker or similar? Are you using the twitter bootstrap bootstrap.js or the UI Bootstrap ? If you are just using the straight up twitter bootstrap you will have problems using any of the bootstrap components that are implemented in javascript.

Hope that helps