[Fixed] How to access or read the css property value in angular typescript file

Issue

html file:

<div #sampleComponent class="cdt-sample-component"
[ngStyle]="{'height': (view_height) + 'px'}" >
  <app-component></app-component>
</div>

css file:

.cdt-sample-component {
    display: flex;
    flex: 1;
    height: calc(100% / 3);
}

}

ts file:

constructor(private renderer: Renderer2) {
}

ngAfterViewInit() {
    logger.info("NativeElement height " + this.renderer.selectRootElement(this.metricsComponent['nativeElement']).getAttribute('height'));
    }

The above log print in ts file is returning null for "height" attribute.
I am using angular 7.

I would like to get the value of "height" attribute defined in css in div element "cdt-sample-component", somehow i am getting null. Can you please answer on how to get the height attribute value in ts file which is defined in css file.

Solution

You could try to use ViewChild to get a reference to the element and read it’s clientHeight or offsetHeight property.

Controller

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";

export class SomeComponent implements AfterViewInit {
  @ViewChild("sampleComponent") sampleComponent: ElementRef<any>;

  ngAfterViewInit() {
    console.log(this.sampleComponent.nativeElement.clientHeight);
  }
}

For clientHeight vs offsetHeight see here: https://stackoverflow.com/a/15615701/6513921