CODEWITHSUNDEEP
cssangular
My real name
My real name

Reputation: 547

Why angular automatically adding unnecessarily tag?

I want to edit my pagination CSS with this following CSS:

<style>
.ngx-pagination a{
    margin: 0 3px ! important;
    color: #9B9B9B ! important;
    font-weight: bold ! important;
    border: solid 1px #ccc ! important;
    border-radius: 4px ! important;
    text-decoration: none ! important;
}
</style>

but I don't know why after running my angular project and inspecting my browser I get this selector on my css [_ngcontent-c3]

enter image description here

why angular adding this unnecessarily selector by itself? I dont know how to remove this

Upvotes: 0

Views: 961

Answers (2)

Kiran Dash
Kiran Dash

Reputation: 4956

This happens due to emulated view encapsulation. See more here angular.io/guide/component-styles#view-encapsulation

To remove this, use:

encapsulation: ViewEncapsulation.None

in the component decorator function. However, this will remove the encapsulation of your css components. In other words, your css will not be independent and it can be affected by other styles.

Upvotes: 1

dileepkumar jami
dileepkumar jami

Reputation: 2265

_ngcontent-c# attributes are added when you use ViewEncapsulation.Emulated - which is default.

Angular uses these attributes to target specific elements with the styles. The number c is sort of a unique identifier of the host component. For example, if you have two components with the following templates:

ComponentA
<span></span>
<comp-b></comp-b>

ComponenB
<h1></h1>

Angular will mark all elements with styles inside component A as _ngcontent-c0 and all elements with styles inside component B with _ngcontent-c1:

<comp-a>
    <span _ngcontent-c0></span>
    <comp-b _ngcontent-c0>
        <h1 _ngcontent-c1></h1>
    </comp-b>
</comp-a>

Upvotes: 2

Related Questions