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

Question

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.

Answer 1

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