Need help- Single and double mouse clicks in Angular.

[Akshay]

Hi, I am trying to get click events for single click, as well as for double click using click recognizer in Angular. I am getting single click events but failed to get double click events.
though, i have implemented these click events on separate elements. one is `this.Wwd` and another one is `this.Wwd.canvas`


system setup:-

Angular CLI: 11.2.3
Node: 14.15.5

package.json dependencies are-
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular/animations": "~11.2.4",
"@angular/cdk": "^11.2.3",
"@angular/common": "~11.2.4",
"@angular/compiler": "~11.2.4",
"@angular/core": "~11.2.4",
"@angular/platform-browser": "~11.2.4",
"@angular/platform-browser-dynamic": "~11.2.4",
"@nasaworldwind/worldwind": "^0.10.0",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},

I installed nasaworldwind by npm install .
cmd - '' npm install @nasaworldwind/worldwind --save ''


map.component.html file:-
```
<canvas id="canvasOne">
Your browser does not support HTML5 Canvas.
</canvas>
```
map.component.css file:-

#canvasOne{
height: 800 px;
width: 800 px;
}

map.component.ts file:-

```
import * as WorldWind from '@nasaworldwind/worldwind';

@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css'],
})

export class MapComponent {

Wwd: any;
doubleClick = false ;
singleClick = false ;

constructor(){}

// click recognizer for double click.
handleDoubleClick = (recognizer) => {
// Obtain the event location.
let x = recognizer.clientX, y = recognizer.clientY;

let pickList = this.Wwd.pick(this.Wwd.canvasCoordinates (x, y));

if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {

this.doubleClick = true; // set boolean to true.
}
};


// click recognizer for single click.
handleClick = (recognizer) => {
// Obtain the event location.
let x = recognizer.clientX, y = recognizer.clientY;

let pickList = this.Wwd.pick(this.Wwd.canvasCoordinates (x, y));

if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {

this.singleClick = true; //set boolean to true.
}
};


ngAfterViewInit() {
let wwd = new WorldWind.WorldWindow('canvasOne');

wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BMNGLandsatLayer());

wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));

wwd.redraw();
this.Wwd = wwd;

// Listen for mouse clicks.
const clickRecognizer = new WorldWind.ClickRecognizer(this.Wwd, this.handleClick);

const clickRecognizer2= new WorldWind.ClickRecognizer(this.Wwd.canva s, this.handleDoubleClick); // On Wwd.canvas element.
clickRecognizer2.numberOfClicks = 2;

// Listen for taps on mobile devices.
const tapRecognizer = new WorldWind.TapRecognizer(wwd, this.handleClick);

wwd.redraw();

}
}
```

[thecosmostips]

Thanks for this information,

[thecosmostips]

Amazing