Update CSS variable in Angular

Question

I want to use in my Angular app Bennett Feely "Image-effects".

For exemple this is the 'photo-border-effect':

.photo-border-effect {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg), url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

[class$=-effect] img {
    vertical-align: top !important;
    margin: 0 !important;
    opacity: 0 !important;
}

/* CodePen Styles */
body {
    display: flex;
    height: 100vh;
}
div {
    margin: auto;
}

<div class="photo-border-effect">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg">
</div>

But I have to change the urls in the CSS manually, not very convenient for my app. I know I can use CSS variables but I can't find a way to update it from my .ts directly.

What is the proper way to update CSS variable in Angular?

Mihir Dave response could work but I have cases with different background-image in the same class:

.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}

Toto Briac · Accepted Answer · 2021-03-11 09:38:02Z

3

I found a quick and easy way to do it.

I use CSS variables and set the value from my .ts using DomSanitizer.

Here is a Stackblitz with this solution implemented.

answered Mar 11, 2021 at 9:38

Toto Briac

93610 silver badges36 bronze badges

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

Comments

Mihir Dave · Accepted Answer · 2021-02-25 07:42:05Z

0

You can remove the background image from the CSS and pass it from a template using angular like this.

<div [style.background-image]="'url('+YourUrlFromVariable+')'"></div>

you can also create a method in the ts file with your business logic to return a string

<div [style.background-image]="getBackGroudImage()"></div>

TS

getHeroes(): string {
    // add cases here based on which you can return different strings to background urls
    return 'url('+YourUrlFromVariable+'), url(photo.jpg);';
}

edited Feb 25, 2021 at 7:42

answered Feb 25, 2021 at 7:23

Mihir Dave

4,0241 gold badge14 silver badges28 bronze badges

3 Comments

Toto Briac Over a year ago

But some effects needs background-image: url(photo.jpg), url(photo.jpg);

Mihir Dave Over a year ago

@TotoBriac please check the Updated answer.

Toto Briac Over a year ago

Could work but I am facing an other issue, plese check updated question

Collectives™ on Stack Overflow

Update CSS variable in Angular

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related