Zoom in & zoom out in Angular not working for ngx-image-cropper

Question

I am trying for Zoom in & Zoom out from ngx-image-cropper. I am not getting any error but when I click the button zoomOut or ZoomIn it's not working.

What am I doing wrong here?

My TS code

  zoomOut() {
    this.scale -= .1;
    this.transform = {
        ...this.transform,
        scale: this.scale
    };
}

zoomIn() {
    this.scale += .1;
    this.transform = {
        ...this.transform,
        scale: this.scale
    };
}

My HTML code

       <button class="btn zoomIn" (click)="zoomIn()" tooltip="Zoom In" data-toggle="tooltip" data-placement="top" title="Zoom In"></button>
       <button class="btn zoomOut" (click)="zoomOut()" tooltip="Zoom Out" data-toggle="tooltip" data-placement="top" title="Zoom Out"></button>

Answer 1

It's similar to this another SO. Well, really Angular is the same always, relationate variables in .ts (the model) with the .html (the view). Well in the docs about binding the e.g. is very poor. Personally I hate the example {{variable}} :)

You declare a variable scale

scale:number=1;

<!--see that you can use the .html to makes "simple code"
     (equal a variable to another an so on)
-->
<button class="btn zoomIn" (click)="scale=scale+.1"></button>
<button class="btn zoomIn" (click)="scale=scale-.1"></button>

<img [style.transform]="'scale('+scale+')'" ...>

Answer 2

export class AppComponent {  
  zoom:boolean=false;
  zoomOut(){
    this.zoom=false;
  }
  zoomIn(){
    
    this.zoom=true;
  }
  getheight(){
    if(this.zoom==true){
      return '500px';
      //return your desiderd value in pixel or in percentage
    }
    else{
      return '200px';
      }
  }

}

button{
    padding: 8px;
}
#test-zoom{
    height: 500px;
    width: 100%;
    position: relative;
    background: red;
}
.zoom-card{
    height: 500px;
    width: 90%;
    position: relative;
    margin: auto;
    background: lime;
}

.test-image{
    width: auto;
}

<section id="test-zoom">
  <div class="zoom-card">
    <img [ngStyle]="{'height':getheight()}" width="auto" class="test-image" src="https://www.netcetra.com/images/howto_images/photoshop-logo.jpg">
    <br>
    <button (click)="zoomIn()" >Zoom In</button>
    <button (click)="zoomOut()" >Zoom Out</button>

  </div>
</section>

Use this code and paste it into app.component.ts, CSS, and HTML files.