How to get img.naturalWidth in Angular 6 Directive? - angular6

Question

I have a custom Angular 6 directive like this:
import { Directive, ElementRef } from '#angular/core';
#Directive({
selector: '[appImgOrientation]'
})
export class ImgOrientationDirective {
constructor(el: ElementRef) {
console.log(el);
console.log(el.nativeElement);
}
}
el returns the element with all of its properties. el.nativeElement has many properties. (50+)
But el.nativeElement returns only the elements html code:
<img _ngcontent-c2 src="https://example.com/image.jpg" class="MyClass">
I want to read naturalWidth and naturalHeight properties of nativeElement. I can already read these values using native Javascript on <img (load)="detectOrientation(imgUrl)"> but I don't want to.
detectOrientation(imgUrl): void {
var orientation;
var img = new Image();
img.src = imgUrl;
img.onload = () => {
if (img.naturalWidth > img.naturalHeight) {
//landscape
orientation = 'h';
} else if (img.naturalWidth < img.naturalHeight) {
// portrait
orientation = 'v';
} else {
// even
orientation = 'square';
}
}
I want to do it in the directive. How can I do it?

Answer 1

Although logging el.nativeElement prints the html markup to console, this object does in fact have accessible properties, as listed here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
Example:
console.log(el.nativeElement.naturalWidth);