CODEWITHSUNDEEP
angularangular-directiveangular-components
胡亚雄
胡亚雄

Reputation: 2189

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

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

@Directive({
    selector: '[move]'
})
export class MoveDirective{}

Hey, I want to get the <figure id="donation"> element's width/height within MoveDirective and DonationComponent. I have read the documentation several times but still cannot find a way to this answer. Does somebody know this? Thanks a lot!

Upvotes: 46

Views: 163994

Answers (4)

rofrol
rofrol

Reputation: 15226

const rowHeight = this.elRef.nativeElement.querySelector('.datagrid-table > .datagrid-row').getBoundingClientRect().height;

https://angular.io/guide/migration-renderer

Inspired by this getting 'nativeElement.querySelector is not a function' exception in Angular2

Upvotes: 0

Wassim Katbey
Wassim Katbey

Reputation: 327

@ViewChild doesn't work for everybody- at least, not for me. I'm using Angular 9. What did work was using @ViewChildren:

@ViewChildren('myIdentifier')
myIdentifier: QueryList<ElementRef>;

ngAfterViewInit() {
  this.myIdentifier.changes.subscribe((identifiers) => {
    console.log("OFFSET WIDTH", identifiers.first.nativeElement.offsetWidth);
  });
}

Upvotes: 0

bersling
bersling

Reputation: 19262

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.

Upvotes: 38

micronyks
micronyks

Reputation: 55443

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.

Upvotes: 66

Related Questions