Ionic6 Use two fingers to achieve the zoom function

Ionic Framework
1 
html:
   <div class="zoomable">
      <img [src]="largeImage" alt="Zoomable Image">
    </div>

ts:
import { Component, ElementRef, OnInit } from '@angular/core';
import { Gesture, GestureController } from '@ionic/angular';

@Component({
  selector: 'app-zoom',
  templateUrl: './zoom.component.html',
  styleUrls: ['./zoom.component.scss'],
})
export class ZoomComponent implements OnInit {
  private gesture?: Gesture;  // 使用 `?` 表示可能为 `undefined`
  private scale = 1;

  constructor(private el: ElementRef, private gestureCtrl: GestureController) {}

  ngOnInit() {
    this.createGesture();
  }

  private createGesture() {
    this.gesture = this.gestureCtrl.create({
      el: this.el.nativeElement,
      gestureName: 'pinch',
      onMove: (event) => this.onPinch(event),
    });
    this.gesture.enable(true);
  }

  private onPinch(event: any) {
    if (event.type === 'pinch') {
      this.scale = event.scale;
      this.el.nativeElement.style.transform = `scale(${this.scale})`;
    }
  }
}

I don’t know where the problem lies and it didn’t succeed

help me