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


html file:

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

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.


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


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

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

  ngAfterViewInit() {

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

Leave a Reply

(*) Required, Your email will not be published