Angular: transclusion, set color of SVG element

Question

I have a component.html that transcludes my svg component:

<masterflex-sidebar>
    <masterflex-logo sidebar-logo color="white">

    </masterflex-logo>
</masterflex-sidebar>

My logo.ts file:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'masterflex-logo',
  templateUrl: './masterflex.component.html',
  styleUrls: ['./masterflex.component.scss']
})
export class MasterflexComponent implements OnInit {

  @Input() color:string

  constructor() { }

  ngOnInit() {
  }

}

My svg component(part of it):

<svg 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px"
    viewBox="0 0 237.4 35.9"
    height="35.9"
    width="237.4"
    xml:space="preserve" *ngIf="color">

I want to be able to change the color of my svg component to whatever color I want (set in my first component with color="white") and have that color apply to my svg. Is there a way to pass that color attribute into a scss style?

Solution

An SVG element has a stroke and a fill color. You can set each one with the corresponding element or style attribute:

<svg [attr.stroke]="color" ... >
<svg [style.stroke]="color" ... >
<svg [attr.fill]="color" ... >
<svg [style.fill]="color" ... >

The color input property of the component must be set in the parent component:

<my-svg-component [color]="myCustomColor" ...>

You can try the code in this stackblitz. Please note that if shape and text elements inside of the SVG element set their own stroke or fill colors, these will override the color set at the SVG element level.

Comments

[Snorlax]

Didn't work. The attribute appears as just style on the tag but with no color attribute nor its value.

[Snorlax]

perfect, exactly what I needed. Is there a place where I can read on what that [] thing is in the element? I'm having a hard time navigating the angular doc

[ConnorsFan]

Yes, you can read about Angular property binding in this page of the documentation. Actually, the whole page about template syntax is a must read.

[Pardeep Jain]

is it possible to change fill color when I was using img tag wrapped around svg image

[ConnorsFan]

@PardeepJain - According to this answer, it seems to be possible only for inline SVG. I haven't been successful when trying to modifiy the fill color of an SVG element used as an image src.

[Pardeep Jain]

@ConnorsFan Yes, Even I've tried and finally end up using background-mask of HTML element as an SVG image and gave a background color to that.