score:0

If you are having issues getting the style with window.getComputedStyle, I think you may need to wait until the DOM is rendered in ngAfterViewInit, and check for changes to the DOM re-rendering in ngOnChanges

I think the best way would be to create a directive which can access the DOM.

@Directive({
  selector: '[color-getter]'
})

export class ColorGetter {
  constructor(public el: ElementRef) {}
  ngOnChanges() {
    setTimeout(() => {
      console.log(this.el.nativeElement.style.color);
    })
  }
  ngAfterViewInit() {
    console.log(this.el.nativeElement.style.color);
  }
}

The best way is to use a directive through which you can get access to the native DOM element to which this directive is applied. Then you can wait until the DOM is rendered in AfterViewInit hook and use getComputedStyle method to get all computed styles.

score:0

This is what I ended up having to do:

component.scss

.my-color {
  fill: global-style('text', 'grey');
}

component.html

<div #my-div class="my-color"></div>

component.ts

plottingArea.append('text')
    .classed('my-color', true)

The classed() methods was the answer. But I'm still not sure why I wasn't able to get the value of a style.

score:2

You can use getComputedStyle:

const color = window.getComputedStyle(this.myDiv.nativeElement).color;

Related Query