CODEWITHSUNDEEP
angulartypescriptangular8ngx-image-cropper
Mr.M
Mr.M

Reputation: 1480

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

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>

Upvotes: 0

Views: 6522

Answers (2)

IAM5K
IAM5K

Reputation: 282

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.

Upvotes: 1

Eliseo
Eliseo

Reputation: 57919

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+')'" ...>

Upvotes: 0

Related Questions