Hammerjs configuration for pinch zoom in Angular

Question

I am using HammerJS with Angular 4 application for pinch zoom an image. In hammerJS doc it is mentioned by default pinch zoom is set to off and the code to turn it on is

hammertime.get('pinch').set({ enable: true });

Could anyone please help me what is angular 4 equivalent of this and what are the other configuration required to use hammer pinch zoom in angular 4?

Answer 1

Your question is pretty vague. As asked though, the following is most likely what you are looking for:

You first need to perform an npm install in your project to bring in the hammerjs library: npm install --save hammerjs

Then in your view/component you need to get a reference to the element you are interested in listening to events on with hammer.js.

Below is an example of how you could do that with small modifications on the default project the cli produces.

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img #img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

app.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('img') imgElement: ElementRef;
  title = 'app';

  ngAfterViewInit(): void {
    const hammer = new Hammer(this.imgElement.nativeElement);
    // hammer.on('press', function(e) {
    //   e.target.classList.toggle('expand');
    //   console.log('You\'re pressing me!');
    //   console.log(e);
    // });

    hammer.get('pinch').set({ enable: true });
  }
}

Full answer code on GitHub.