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

_x000D_
_x000D_
@Component({_x000D_
    selector: '.donation',_x000D_
    template: `_x000D_
    <figure id="donation" move>_x000D_
        <img src="image/qrcode.png"/>_x000D_
        <figcaption>_x000D_
        Buy me a cup of coffee._x000D_
        </figcaption>_x000D_
    </figure>_x000D_
    `_x000D_
})_x000D_
export class DonationComponent{}_x000D_
_x000D_
@Directive({_x000D_
    selector: '[move]'_x000D_
})_x000D_
export class MoveDirective{}
_x000D_
_x000D_
_x000D_

Hey,I want to get element's width/height within MoveDirective and DonationComponent,I read the document several times but still can not find a way to this answer.Do somebody know this please help me,thanks a lot!

This question is related to angular angular-directive angular-components

The answer is


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.


Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to angular-directive

Get Value From Select Option in Angular 4 How to get element's width/height within directives and component? is there any alternative for ng-disabled in angular2? How to extend / inherit components?

Examples related to angular-components

How to rename a component in Angular CLI? How to Update a Component without refreshing full page - Angular Angular 2 'component' is not a known element How to get element's width/height within directives and component? Call child component method from parent class - Angular How to style child components from parent component's CSS file? What is the equivalent of ngShow and ngHide in Angular 2+? Angular 2: How to style host element of the component? How can I select an element in a component template?