Change Style of Pseudo Elements in Angular2

Change style of pseudo elements in angular2

No it's not possible. It is actually not an Angular issue: pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them.

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 corresponding pseudo-element. So in your case you could have one more class that changes necessary style:

.blur:before {/* some styles */}
.blur.background:before {/* set background */}

Now all you need to do is to toggle .background class on the element when you need before pseudo-element to get a background. You can use NgClass, for example.

angular change pseudo element style by condition

Does this variable needs to be placed in scss? If it can be moved into .ts file, I'd suggest to add conditional class in your template:

[class.sender--visible]="showAvatar"

Then you need to modify your existing .scss class, adding visibility: hidden and create a new one, which will be:

.sender.sender--visible::before {
    visibility: visible;
}

Edit dynamically pseudo-elements with angular 2

Can't find out how to edit those pseudo-elements. But I managed to do what I want by recreating progress bars with div. Here's the code if it can help somebody :

In HTML (with Angular 2)

<div class="probar">
  <div class="inside-probar" [ngStyle]="{background:color, width: ((value * 100)/max) + '%'}">
    {{value}}/{{max}}
  </div>
</div>

In CSS

.probar{
  height: 20px;
  width: 140px;
  border-radius: 5px;
  background: #ccc;
  padding: 3px;
}

.inside-probar{
  text-align: center;
  height: 20px;
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
  margin-left: 0px;
  color: black;
}

Angular: dynamically change SCSS property in pseudo-class

Styling to HTML element having pseudo-class is not possible, because pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them and style those elements.

But just as hack you can use mouseover and mouseout event for your use case to toggle style dynamically, for example -

<ul>
  <li *ngFor='let item of items' #ele (mouseover)='ele.style.color = item?.color' (mouseout)='ele.style.color = "black"'>{{item?.id}}</li>
</ul>

Working Example

Dynamic styling of before pseudo element - Angular 5

You can't style them directly from your component, but you can create a CSS rule in your stylesheet with JS.

Once you get your colors :

let styleSheet = document.styleSheets[0];
styleSheet.insertRule(`.your-class:before { color: ${yourColor}; }`, styleSheet.cssRules.length);

This will add the rule at the end of your file (so applied last).

Be careful about view encapsulation though !

Dynamically fill css Pseudo-element 'before' content with Angular2

Use: <div class="test" [attr.data-before]="[name]">

UPDATE

You can also just drop the square brackets around name like this:

<div ... [attr.data-before]="name">.

This appears to be the convention in a number of examples I see. This works, I think, because you are already telling Angular to perform binding by specifying the [attr.data-before], and it assumes the data on the right is coming from the corresponding component.

How to change style for before/after in Angular?

If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.

Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

And in CSS:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}

---

Related Topics