Property 'nativeElement' does not exist on type 'IonContent'

Issue

I am creating an image zoomIn/ZoomOut in ionic 5, hence the above error.

Below is my script:

HTML

    <img #zoomedImage [src]="media.image" />

TS

    @ViewChild('zoomedImage', { static: false }) zoomedImage: IonContent;
    
    zoom = 1;
    
     zoomIn() {
        this.zoom += 0.1;
        this.zoomedImage.nativeElement.style.transform = `scale(${this.zoom})`;
      }
    
      zoomOut() {
        if (this.zoom > 1) {
          this.zoom -= 0.1;
          this.zoomedImage.nativeElement.style.transform = `scale(${this.zoom})`;
        }
      }

Solution

Because your using the wrong type in the viewChild. Use:

@ViewChild('zoomedImage', { static: false }) zoomedImage: ElementRef;

Answered By – StackoverBlows

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0