Zoom In, Zoom Out Image On Mouse Wheel Scroll Using Angular 2

Monday, 31 October 2016 | Posted by
In previous article, I have written Angular 2 Directive for mouse wheel scroll. Here in this example we will use that directive. So please read previous article before going through this example.
Source Code         DEMO

Program Flow

  1. Width of the image can be manipulated by [style.width] pre-defined directive. Initialise width for the image as imgWidth = 300
  2. On Mouse scroll up increment imgWidth by 10 and assign to imgWidth
  3. On Mouse scroll down decrement imgWidth by 10 and assign to imgWidth

Markup

<img mouseWheel [style.width]="imgWidth" src="sample.png" (mouseWheelUp)="mouseWheelUpFunc()" (mouseWheelDown)="mouseWheelDownFunc()"/>

app.component.ts

When user scrolls upward, mouseWheelUpFunc will be called. If user scrolls downward, mouseWheelDownFunc will be called. 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h2>Mouse wheel scroll on below image</h2>
    <img mouseWheel [style.width]="imgWidth" src="sample.png" (mouseWheelUp)="mouseWheelUpFunc()" (mouseWheelDown)="mouseWheelDownFunc()"/>
  `
})
export class AppComponent {
  mouseWheelDir: string = '';
  imgWidth: number = 300;

  mouseWheelUpFunc() {
    console.log('mouse wheel up');
    this.imgWidth = this.imgWidth+10;
  }

  mouseWheelDownFunc() {
    console.log('mouse wheel down');
    this.imgWidth = this.imgWidth-10;
  }
}

app.module.ts

Now include mouseWheelDirective in app module.  
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MouseWheelDirective } from './mousewheel.directive';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, MouseWheelDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
Labels:

2 comments:

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts