CODEWITHSUNDEEP
cssangular
Rick
Rick

Reputation: 255

Get Class Properties Applied to Element via Angular

I'm new to Angular (and Angular 5.x specifically), and am hoping someone can shed some light on something for me..

I'm trying to figure out how to read (not manipulate) the CSS style properties of a certain class that's applied to a known element.

For example, I've got a text element that has the "special-fancy-text" CSS class applied to it. How can I access that element's CSS class's properties to dynamically tell what font family, font size, color, or other options are currently set within it?

Thanks!

Upvotes: 1

Views: 2800

Answers (1)

DeborahK
DeborahK

Reputation: 60518

You can use ViewChild like this:

html

<div  #filterDiv class='col-md-2' style='color: blue'>Filter by:</div>

Component

  @ViewChild('filterDiv') filterDivRef: ElementRef;

  ngAfterViewInit(): void {
    if (this.filterDivRef.nativeElement) {
      console.log(this.filterDivRef.nativeElement.style.color);
    }
  }

The above will display 'blue' to the console. This this for more details: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Though I don't think that if you use a style class that this will be able to tell you the style properties from that class.

Upvotes: 2

Related Questions