Angular 2 set dynamic styles from component (background image: linear gradient)

Question

I'm using angular2 rc2 and typescript. I have an angular 2 component where a color is set using a propertie.

Inside the component the color is converted to rgba and a linear gradient is created and I want to set it to 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;

            opacity < 0 ? opacity = 0 : opacity = opacity;
            opacity > 1 ? opacity = 1 : opacity = opacity;

            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 +')';

      }
}

This is not working. Something is failing and the gradient is not even set in the html. Is this the correct way to do it?

Sounds like http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 — Günter Zöchbauer, Jun 21 '16 at 16:43

score 3 · Accepted Answer · answered Jun 21 '16 at 16:46

import {DomSanitizationService} from '@angular/platform-browser';

class HorizontalRule implements OnInit {
  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }

  ngOnInit() {
        //color: #FF0000

        let rgba:string = this.transform(this.ConvertHexToRGBA(this.color, 0.7));

        //rgba: rgba(255,0,0,0.7)

        this.BackgroundImage = this.transform("-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))";)
  }
}

I had to make a few adjustments, but this is correct, we need to use the DomSanitizationService. If I have only the linear gradient, it works. If I add the other prefix it does not work... — hsantos, Jun 22 '16 at 13:44
Glad to hear you figured it out :) Some things are whitelisted by default and others need explicit sanitization. — Günter Zöchbauer, Jun 22 '16 at 13:55

Angular 2 set dynamic styles from component (background image: linear gradient)

1 Answers1