cssangularangular-renderer2

Angular renderer setStyle will not apply linear-gradient

Angular's renderer2 will not apply linear-gradient CSS. Can anyone see what I'm missing?

export class AppComponent implements OnInit {

  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

  public ngOnInit(): void {
    this.renderer.setStyle(
      this.elementRef.nativeElement,
      "background",
      "linear-gradient(rgba(253,92,99,1), rgba(144,255,0,1) 30%);" 
      // "red" // works, so does this rule in CSS
    );
  }
}

Here is a stackblitz repro

Solution

  • Ben,

    last semicolon in gradient rule produces an error: this way it works:

        this.renderer.setStyle(
      this.elementRef.nativeElement,
      "background",
      "linear-gradient(rgba(253,92,99,1), rgba(144,255,0,1) 30%)" //no semicolon in the end
    );