change color of svg icon component with angular

Question

Here beginner in typescript, more with css and first time playing with SVG.

I'm trying to make an heater svg icon that the four wave change color in function of the heater heating stage.

In the console log, it seem to work on the controller but I'm unable to display the color properly.

HTML:

Script:

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

@Component({
  selector: 'heater-svg',
  templateUrl: 'heater-svg.html'
})
export class HeaterSvgComponent implements OnChanges {
  @Input() stage: number = 0;

  constructor() {
  }

  ngOnChanges() {
    this.stageSet(this.stage);
  }

  stageSet(stagePercent: number) {
    let idList = ["svg_1", "svg_2", "svg_3", "svg_4" ];
    let stage: number = 0;

    if (stagePercent > 99) {
      stage = 4;
    } else if (stagePercent > 70) {
      stage = 3;
    } else if (stagePercent > 30) {
      stage = 2;
    } else if (stagePercent > 0) {
      stage = 1;
    }

    console.log(stage);  // <<<-----------------

    for (let i = 1; i < 5; i++) {
      let state = false;

      if (stage >= i) {
        state = true;
      }

      this.displayStage(idList[i-1], state);
    } 
  }

  displayStage(id: string, state: boolean) {
    let el = document.getElementById(id);

    if (el) {
      if (state) {
        console.log("fill in red");
        el.style.fill = '#ff3300';
      } else {
        el.style.fill = '#dadada';
      }
    }
  }
}

This is used in an ionic4 app, inside an ion-slide oc 10 slide:

displayStage fires and console.log logs the data correctly, but el.style.fill does not work when I do not mute the else one, and even so, it only change the icon in the first slide...

Is component use some kind of instance for each use of the ccomponent or resource are some share?

Is getElementById a good way of doing it? Or is fill the better way to change the svg color? I think the data [stage] is processed correctly.

change color of svg icon component with angular

HTML:

Script:

Answers (1)

Related Questions