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.
Program Flow
- Width of the image can be manipulated by [style.width] pre-defined directive. Initialise width for the image as imgWidth = 300
- On Mouse scroll up increment imgWidth by 10 and assign to imgWidth
- 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 { }
Such news should be made more widely available.
ReplyDeleteanal fingering
Great Article
ReplyDeleteFinal Year Projects for CSE in Angular
Angular Training in Chennai
Project Centers in Chennai
JavaScript Training in Chennai