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


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


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

  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;


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';

  imports:      [ BrowserModule ],
  declarations: [ AppComponent, MouseWheelDirective ],
  bootstrap:    [ AppComponent ]
export class AppModule { }



Follow this blog by Email

Popular Posts