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

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


You can't have the size of an element before the page is loaded. In case it's not clear enough, if the page isn't loaded, then your HTML element isn't loaded.

If you want to set the viewbox of your SVG according to a div, you will need to wait for the page to load, then change the viewbox. It's perfectly doable.

The fastest way of doing that is :

<div #container>Container's width is {{ container.offsetWidth }}</div><svg:svg [width]="container.offsetWidth"></svg>

I'll let you deal with the viewBox attribute, since I don't really know what you want to do with it.

You need to add the svg: prefix to tell angular it's not a custom directive, by the way.