angular change pseudo element style by condition

Question

I need to change :before style by condition I try to use the https://stackoverflow.com/a/37902154/13739803 solution but not work my code is:

.sender:before {
              content: "";
              width: 0px;
              height: 0px;
              position: absolute;
              border-left: 15px solid $otaghakPinkLight;
              border-right: 15px solid transparent;
              border-top: 15px solid $otaghakPinkLight;
              border-bottom: 15px solid transparent;
              right: -16px;
              top: 0px;
              visibility: var(--porcentaje-visibility);
}

html code:

<div class="message-box sender" [style]="{ '--porcentaje-visibility': showAvatar ? 'visible' : 'hidden' }">test</div>

I want to visible or hide :before by condition

Answer 1

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;
}