6

Is there a better way to modify a pseudo-elements attribute using a component variable than what I am currently doing? I am not doing it the Angular way, but that is my goal. My way will surely break down when porting to mobile. I would like to put a variable within the component style sheet:

component:

@Input() public variable = variable;

component-style-sheet:

input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{
 background:linear-gradient(#568200, #568200) 0/variable 100% no-repeat #ccc
}

Unfortunately it doesn't exist in my template so I can not place an [ngClass] or [style.margin-left.px]="containerX-9" or anything on it. At the moment I am doing this by setting a global CSS variable onFormChanges().

component:

  onFormChanges(): void {
this.myForm.valueChanges.subscribe(() => {
            document.documentElement.style.setProperty('--variable', variable)
}
}

component-style-sheet:

background:linear-gradient(#568200, #568200) 0/var(--variable) 100% no-repeat #ccc

But this seems like a workaround and hard to track. What is the Angular way to do this? Does Angular not have a way to use a component variable value in a pseudo element? What am I missing? Is there a cleaner way to do this? Thanks for any insights or suggestions!

imnickvaughn
  • 2,774
  • 9
  • 25
  • 42
  • 1
    I'm a bit unclear what you're trying to do. Are you simply hoping to override the component style sheet? In that case you would just add `input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{ styles }` to your app style sheet. The component get's added to your app and then your CSS also gets applied. Or am I missing the point? – Bryce Howitson Mar 21 '19 at 03:59
  • Hi Bryce thanks for your question. The styles on that element have already been overridden. I am trying to get access to the style-sheet in a different way than I already have. Instead of using css3 global variables and setting that attribute whenever my reactive form changes I want to directly change the style sheet in that component somehow. You can do it with the elements that you write in the template but since pseudo elements are not within your template it seems like they are arbitrarily off limits. Hope this answers your question. Added to description of current code in OP. – imnickvaughn Mar 21 '19 at 04:05
  • Just so I'm clear on the problem. The component has CSS that uses a --variable. This get's compiled and loaded into the App CSS which then flattens the variable to its last value? So if you change the --variable the compiled version doesn't change. Do I have that correct? Do you need to then change that variable dynamically during app run? Or is it just a change once and its good? – Bryce Howitson Mar 21 '19 at 04:13
  • This is how css variables work: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties if I continue to set the variable it will change to what i set it to. – imnickvaughn Mar 21 '19 at 17:28
  • So I think the way you're doing it, (assuming it works) is probably fine, assuming that the variable value needs to change throughout the lifecycle. That said, it looks like you're setting a background position. Is that something you could just override in CSS once and not deal with injecting the variable? – Bryce Howitson Mar 21 '19 at 18:36
  • I guess [this answer](https://stackoverflow.com/a/46536494/7353745) might help you. If I understood correctly. – k0hamed Mar 31 '19 at 07:56

2 Answers2

0

Quoting this answer:

Usual approach if you want to deal with pseudo elements programmatically is indirect: you add/remove/change class and in CSS make this class affect the corresponding pseudo-element.

0

inside a template you use ngif depending on the variable ,you assign a class or another and thus changing view.

sancelot
  • 1,905
  • 12
  • 31