Use click event in angular2-openlayers to show details of clicked marker

Question

I'm new to Angular and Openlayers (3). I found this open source library which wraps Openlayers in Angular.

My question is very simple. I want to detect the event when an user clicks on one of the generated features in order to display the details of the clicked feature.

HTML template:

<aol-map [width]="'100%'" [height]="'100%'">
    <aol-interaction-default></aol-interaction-default>
    <aol-view [zoom]="zoom">
        <aol-coordinate [x]="7.1756" [y]="51.2640" [srid]="projection"></aol-coordinate>
    </aol-view>
    <aol-layer-tile [opacity]="opacity">
    <aol-source-osm></aol-source-osm>
    </aol-layer-tile>
    <aol-layer-vector [opacity]="opacity">
        <aol-source-vector>
        <aol-feature *ngFor="let activity of activities" (click)="onSelected(activity)">
                <aol-geometry-point>
                    <aol-coordinate [x]="activity.location.x" [y]="activity.location.y" [srid]="projection"></aol-coordinate>
                </aol-geometry-point>
            <aol-style>
                <aol-style-icon
                    [src]="'assets/marker.png'"
                    [anchor]="[0.5, 1]"
                    [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'"
                    [scale]="0.1"
                    [anchorOrigin]="'top-left'">
                </aol-style-icon>
          </aol-style>
        </aol-feature>
        </aol-source-vector>
    </aol-layer-vector>
</aol-map>
<div *ngIf="selectedActivity">
<h2>{{selectedActivity.name}} details!</h2>
<div><label>location: </label>{{selectedActivity.location.x}},{{selectedActivity.location.y}}</div>
</div>

As you can see in the template, I have an array of objects (called 'Activity') and iterate over it to generate a feature for each object (with an icon). This works perfectly fine. Now I want to detect if a user clicks on a marker to show details about it in the lower div. I tried to use the exposed 'onClick' event but this only works if I place it on the aol-map-directive. I wished to have something like this:

<aol-feature *ngFor="let activity of activities" (onClick)="onSelected(activity)">

Then I could grab the activity object in my module and do something with that. But this doesn't work unfortunately. Is there any way to achieve the goal of detecting a click on a certain feature?

I thought of using the aol-control-directive, which I would use in replacement of the aol-feature-directive but I think that wouldn't be the right way, would it?

Any hints are highly appreciated.

Edit: Updated the HTML template to clearify my intension.

Answer 1

A few days late but this might help....

You can add a click event to the map element

<aol-map (onClick)="mapOnClick($event)">

Then in your component.ts file use

mapOnClick(evt) {
 const map = evt.map;
 // this bit checks if user clicked on a feature
 const point = map.forEachFeatureAtPixel(evt.pixel,
  function(feature, layer) {
   return feature;
 });

You should be able to use the point variable to extract the details you want to display