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

[BrookeDavis]

Accidentally I have come across this website and am a little bit confused about the details shared diamonds rings near me here. The click events such as single click and double click are mentioned here. It is available here using angular and i want to know more details on that. Hope that you will update the details here soon.