In my angular2 rc2 and typescript project, I am facing an issue with setting the color in an angular 2 component using a property.
Within the component, I have converted the color to rgba and created a linear gradient that I intend to set in the template.
import { Component, Input, OnInit } from "@angular/core";
@Component({
selector: "horizontalrule",
template : `<div class="fadding-ruller-holder">
<hr class="fadding-ruller" [style.background-image]="BackgroundImage">
</div>`,
})
export class HorizontalRule implements OnInit
{
@Input() color:string;
public BackgroundImage:string;
constructor(private utils:UtilsService)
{
}
ngOnInit()
{
//color: #FF0000
let rgba:string = this.ConvertHexToRGBA(this.color, 0.7);
//rgba: rgba(255,0,0,0.7)
this.BackgroundImage = "-webkit-linear-gradient(left, rgba(0, 0, 0, 0)," + rgba + "rgba(0, 0, 0, 0))"
+ "-o-linear-gradient(left, rgba(0, 0, 0, 0)," + rgba + "rgba(0, 0, 0, 0))"
+ "linear-gradient(to right, rgba(0, 0, 0, 0)," + rgba + "rgba(0, 0, 0, 0))";
}
public ConvertHexToRGBA(hex:string, opacity?:number):string
{
opacity = opacity || 1;
if(opacity < 0) {
opacity = 0;
}
else if(opacity > 1) {
opacity = 1;
}
hex = hex.replace('#','');
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity +')';
}
}
I am encountering issues as the gradient is not being set in the HTML. Can someone please guide me on whether this approach is correct?