CODEWITHSUNDEEP
javascriptcssangular
J.G.Sable
J.G.Sable

Reputation: 1408

Changing linear gradient on color picker change

I have a default linear gradient over an image which is set by the following html and typescript code:

<header [style.background-image]="cv2HeaderStyle('0, 0, 0, 0.1', '0, 0, 0, 0.8')"></header>

cv2HeaderStyle(rgba1: string, rgba2: string) {
    return this.sanitizer.bypassSecurityTrustStyle(
      `linear-gradient(to bottom, rgba(${rgba1}), rgba(${rgba2})),
        url(${'../../../assets/imgs/woman-girl-silhouette-jogger-40751.jpg'})`
    );
  }

In a form, I have a dropdown for the ngx-color-picker to allow the user to change the rgba values of the linear gradient.

 <input 
              (colorPickerChange)="updateFirestoreColor($event)" 
              id="filmColorPicker" 
              [(colorPicker)]="color" 
              [style.background]="color"
              [cpOutputFormat]='auto'/>

I'm converting the hex codes to rgba values inside my typescript file with a function, and then trying to set the new cv2HeaderStyle with the new rgba values, however, the following code isn't working:

updateFirestoreColor(color) {
    var setColor1WithOpacity = this.hexToRgb(color) + ', 0.1)';
    var setColor2WithOpacity = this.hexToRgb(color) + ', 0.8)';
    this.cv2HeaderStyle(setColor1WithOpacity, setColor2WithOpacity);
  }

hexToRgb(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',');
    }
    throw new Error('Bad Hex');
  }

I don't have any console log errors and the console is obtaining the correct rgba values

Upvotes: 0

Views: 551

Answers (1)

Eliseo
Eliseo

Reputation: 58039

You need has the "argument" in the .html -or use a variable-

<header [style.background-image]="cv2HeaderStyle(color1, color2)">
//or
<header [style.background-image]="myBackground">

In updateFirestoreColor

updateFirestoreColor(color) {
    this.color1=setColor1WithOpacity = this.hexToRgb(color) + ', 0.1)';
    this.color2=setColor2WithOpacity = this.hexToRgb(color) + ', 0.8)';
     //or 
    const setColor1WithOpacity = this.hexToRgb(color) + ', 0.1)';
    const setColor2WithOpacity = this.hexToRgb(color) + ', 0.8)';
    myBackground=this.cv2HeaderStyle(setColor1WithOpacity, setColor2WithOpacity);
  }

NOTE: NOT use "var" to declare a temporal variable, use "let" if you expect change the value of the variable or const if this value not change anytime more inside the function

Upvotes: 1

Related Questions