@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 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!
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:2. In your controller, you can use this with
@ViewChild('myIdentifier')
to get the width: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 usingElementRef
would be:this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;
. Like this Angular doesn't get a chance to use its sanitisation mechanisms sincesomeFunctionDefinedBySomeUser
is inserted directly into the DOM, skipping the Angular sanitisation.You can use ElementRef as shown below,
DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview check browser's console.
Same way you can use it within component itself wherever you need it.