How to Get Width of (Dom) Element in Angular2

How to get width of (DOM) Element in Angular2

I don't know a way to get the width from the host element without accessing nativeElement but setting could be done like:

@HostListener('window:resize', ['$event.target']) 
onResize() { 
  this.resizeWorks();
}

@HostBinding('style.height.px')
elHeight:number;

private resizeWorks(): void {
  this.elHeight = this.el.nativeElement.width;
}

If you can add an element inside your components template like

<div style="width: 100%;" #div (window:resize)="elHeight = div.getBoundingClientRect()">
  <!-- your template here -->
</div>

then this would work without direct DOM access at all (but not after init).

Angular 2 Get width of a div

elementView won't be set before ngAfterViewInit was called.
If you have your code in ngOnInit or the constructor, you'll get this error.

How to take width of html element in angular2?

<div #table class="nano-table-grid"
  [ngStyle]="tableStyle(table.offsetWidth)"></div>

tableStyle(tableWidth: number) {
  return tableWidth > 1200 ? {
    display: 'block'
  } : {
    display: 'flex',
    maxWidth: '75px'
  }
}

You can instead use ngClass as @SachilaRanawaka suggested, both work.

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.

How to get element's width/height within directives and component?

You can use ElementRef as shown below,

DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview check browser's console.

import { Directive, Input, Output, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector:"[move]",
  host:{
    '(click)':"show()"
  }
})

export class GetEleDirective{
  
  constructor(private el:ElementRef) { }

  show(){
    console.log(this.el.nativeElement);
    
    console.log('height---' + this.el.nativeElement.offsetHeight);  //<<<===here
    console.log('width---' + this.el.nativeElement.offsetWidth);    //<<<===here
  }
}

Same way you can use it within component itself wherever you need it.

How to get width of a parent div and based on do further operations in angular2

I believe this is what you are looking for.

abc.component.ts

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

@Component({templateUrl: './abc-component.html'})
export class AbcComponent implements AfterViewInit {
  @ViewChild('divToMeasure') divToMeasureElement: ElementRef;

  ngAfterViewInit() {
    let divToMeasureWidth = this.divToMeasureElement.nativeElement.offsetWidth;
  }
}

How to get element width or height in Angular 2?

The problem was solved because the div was limiting the size of the picture.

.editor-container {
  position: relative;
}

.editor-container img {
  display: block;
  height: auto;
}

Element height and width change detection in Angular 2

Edit: Modern answer

Modern browsers support the ResizeObserver API. The API has been out for a number of years and is now widely supported. Unfortunately, Edge only supports it now that it's on Chromium. If that matters to you, look at the old answer or use a polyfill.

If you're interested, here goes. You want to create a ResizeObserver object and call observe on it. In this example, the blue block keeps resizing as we cycle the text and padding. The current size of the element is added to the unordered list.

const btn = document.getElementById('btn');
const container = document.getElementById('container');
const output = document.getElementById('output');
btn.onclick = () => {
  if (index > 2) {
    if (container.className === '') {
      container.className = 'high';
    } else {
      container.className = '';
    }
    index = 0;
  }
  container.innerText = values[index++];
}

let index = 0;
const values = [
  'Short',
  'Longer text',
  'Very much longer text of the kind that will fill a large container',
];

function createEntry(text) {
const li = document.createElement('li');
    li.innerText = text;
    output.appendChild(li);
}

let obs = new ResizeObserver(entries => {
  console.log(entries)
  for (let entry of entries) {
    const cr = entry.contentRect;
    createEntry(`Element size: ${cr.width}px x ${cr.height}px`)
  }
});
obs.observe(container);

#container {
  display: inline-block;
  background: lightblue;
}
.high {
  padding: 1rem;
}

<div>
  <button id="btn">Cycle</button>
</div>
<div id="container">Test This</div>
<ul id="output">
</ul>