My website has a default linear gradient over an image, which is controlled 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'})`
);
}
Within a form on my site, I have integrated a dropdown feature for the ngx-color-picker, enabling users to modify the RGBA values of the linear gradient.
<input
(colorPickerChange)="updateFirestoreColor($event)"
id="filmColorPicker"
[(colorPicker)]="color"
[style.background]="color"
[cpOutputFormat]='auto'/>
I'm using a function in my TypeScript file to convert hex codes to RGBA values, and then attempting to update the cv2HeaderStyle with these new values. However, the updated code isn't functioning as expected:
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');
}
Despite correctly obtaining the new RGBA values in the console, there are no errors displayed when running the code.