I am exploring how to create a component in Angular 2 with two input arguments: colorOne and colorTwo. The goal is to fill a <div> with a gradient of these two colors.
If I simply wanted to set the div background color to colorOne, I could achieve that easily with
<div [style.background]="colorOne" class="my-box"></div>background-gradient property. My initial solution involved JavaScript to detect the browser and apply the appropriate prefix:
public get headerColor () {
//... determine the browser
let backgroundStyle = `linear-gradient(left top, ${this.colorOne}, ${this.colorTwo})`;
if (isWebkit) {
backgroundStyle = "-webkit-" + backgroundStyle;
} else if (isO) {
backgroundStyle = "-o-" + backgroundStyle;
} else if (isMoz) {
backgroundStyle = "-moz-" + backgroundStyle;
}
return backgroundStyle;
};
Then, I would use
<div [style.background]="headerColor" class="my-box"></div>