Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get width of (DOM) Element in Angular 4 after page is loaded

Tags:

People also ask

How do you find the width of a DOM element?

Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.

Which method returns the width of an element?

The outerWidth() method returns the width of an element (includes padding and border).


I'm looking for a solution in Angular 4 to get the width of DOM element without taking any action (click or window resize), just after the page is loaded, but before I start to draw the svg. I've found a similar case in here but it doesn't work for me. I get the same error:

ERROR TypeError: Cannot read property 'nativeElement' of undefined

I need to get the width of div container to set veiwbox of svg I'm drawing inside it.

Here is the template:

<div id="what-is-the-width" class="svg-chart-container">
    <svg [innerHTML]="svg"></svg>
</div>

and TS file with stuff needed in this case:

import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class SvgChartComponent implements OnInit {

  @ViewChild('what-is-the-width') elementView: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.elementView.nativeElement);
  }

  ngOnInit() {
    //this method gets the data from the server and draw the svg
    this.getSVGChartData();
  }
}

Does anyone have ideas how to get this working?