clientWidth always returns zero on angular 9+

Question

Hello I want to get width and height from image but clientWidth always returns zero, here is my directive

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[image-fit]'
})
export class ImageFitDirective {

  constructor(
    private _elementRef: ElementRef
  ) {
  }

  ngAfterViewInit(): void {
    this._fit();

  }

  private _fit(): void {
    let width: any = this._elementRef.nativeElement.clientWidth;
    let height: any = this._elementRef.nativeElement.clientHeight;

    // console.log(this._elementRef);
    console.log(width, height);

  }

}

Answer 1

Can you try using like this?

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[image-fit]',  
  host: {
    '(click)':"_fit()"
  }
})
export class ImageFitDirective {

  constructor(
    private _elementRef: ElementRef
  ) { }

  ngAfterViewInit(): void {
    this._fit()
  }

  _fit(): void {
    const width = this._elementRef.nativeElement.offsetWidth;
    const height = this._elementRef.nativeElement.offsetHeight;
    console.log('width', width)
    console.log('height', height) 
  }

}