How to add styles to angular component? (every second element)

Question

I have a question about adding styles to Angular components. e.g I would like to have every second angular component in a list to have red background-color. How can I make it happen?

I tried a lot of different things - it seems that it is added in HTML but doesn't work.

<ang-component class="someClass" />
<ang-component class="someClass" />

I tried setting it in parent component styles

ang-component:nth-child(odd) {
 background-color: red;
}

but it doesn't work. It shows up while inspecting but there is no visible effect

EDIT: Code - to show an example how it looks

<form [formGroup]="form" class="someParentClass" (ngSubmit)="onUpdateForm()" >
    <item></item>
    <hr />
    <item></item>
    <item></item>
<hr />
<div id="btn-save-section">
    <button class="cancel-btn" type="button">Cancel</button>
    <button class="update-btn" type="button">Update</button>
</div>

I want item components to change - so every second should have background color red

You can have a look at nth-child. You can't style a component's selector via HTML adding a class to it. Instead you can achieve it by targetting the selecetor in a style's file. For example: ang-component {font-size: 1rem;}. — Jacopo Sciampi
– Jacopo Sciampi, Commented May 6, 2022 at 10:03
@JacopoSciampi I tried different options with nth-child() So lets say that I have a parent component template. Should I declare this nth-child() in a parent component style's file? Then I can set ang-component:nth-child(odd): background-color: red right? It doesn't work for me — Maxrain
– Maxrain, Commented May 6, 2022 at 10:23
.container > ang-component:nth-child(odd) { background-color: red; } Still doesn't work — Maxrain
– Maxrain, Commented May 6, 2022 at 11:45

mindthefrequency · Accepted Answer · 2022-05-06 12:21:52Z

1

ang-component:nth-child(odd) > * {
 background-color: red;
}

because your component root element is probably only a container w 0 width and 0 height

edited May 6, 2022 at 12:21

answered May 6, 2022 at 10:48

mindthefrequency

5462 silver badges11 bronze badges

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

12 Comments

Maxrain Over a year ago

Still the same, doesn't work :( ` ang-component:nth-child(odd) > * { background-color: red; } `

mindthefrequency Over a year ago

can you share the rendered markup of one of your components? This would make it easier to debug. FE component frameworks usually wrap components with CSS to reset the component style.

mindthefrequency Over a year ago

in the code pen you just shared, if you repeat the markup (<item...>) then add this css: item:nth-child(odd) .image-item { background-color: #f00; } it will display your desired outcome. I was hoping the same to happen in the real world, but if it does not, you'll have to thoroughly inspect your component's css once its rendered in the browser, in order to figure out what is overriding your new selectors / rules.

mindthefrequency Over a year ago

Added the codepen outcome to the answer. Assuming that you're still not getting the desired outcome, I cant really advice any further without getting more details on the context, you'll have to (Ill say it again) thoroughly inspect your component's css once its rendered in the browser in order to figure out why the style isnt kicking in, or being overriden by some other, more specific selector. Another thing you could try would be to increase your new css selector specificity: html > body ang-component:nth-child(odd) > * { background-color: red !important; }

mindthefrequency Over a year ago

ok so that hints us that the element you're trying to colorize isnt visible. 3 options now: 1.trying to figure out why and make it visible (probably a bad idea since it is made invisible for some layout specific reason); 2. trying to set the background color of some other element in the component that fills the area, maybe adding a pseudo-selector to your component style. 3: wrap each component inside a div and set the background color of the div wrapper instead.

|

Collectives™ on Stack Overflow

How to add styles to angular component? (every second element)

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related