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.

For a bit more flexibility than with micronyks answer, you can do it like that:

1. In your template, add #myIdentifier to the element you want to obtain the width from. Example:

<p #myIdentifier>  my-component works!</p>

2. In your controller, you can use this with @ViewChild('myIdentifier') to get the width:

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';@Component({  selector: 'app-my-component',  templateUrl: './my-component.component.html',  styleUrls: ['./my-component.component.scss']})export class MyComponentComponent implements AfterViewInit {  constructor() { }  ngAfterViewInit() {    console.log(this.myIdentifier.nativeElement.offsetWidth);  }  @ViewChild('myIdentifier')  myIdentifier: ElementRef;}

Security

About the security risk with ElementRef, like this, there is none. There would be a risk, if you would modify the DOM using an ElementRef. But here you are only getting DOM Elements so there is no risk. A risky example of using ElementRef would be: this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;. Like this Angular doesn't get a chance to use its sanitisation mechanisms since someFunctionDefinedBySomeUser is inserted directly into the DOM, skipping the Angular sanitisation.