Openlayers 3 : cannot select a feature in an Angular 5 app

Question

I would like to select a feature in Openlayers 3 in my Angular 5 app. Upon clicking on a feature, I get this weird message:

core.js:1449 ERROR TypeError: Cannot read property 'call' of undefined

I have to use Openlayers3 (and not a newer version).

My Html code:

<div #mapElement id="map" class="map"></div>

The component code is:

import {AfterViewInit, Component, ElementRef, ViewChild, OnInit} from '@angular/core';
declare var ol: any;

@Component({
  selector: 'app-taba-features',
  templateUrl: './taba-features.component.html',
  styleUrls: ['./taba-features.component.css']
})
export class TabaFeaturesComponent implements AfterViewInit {
  @ViewChild('mapElement') mapElement: ElementRef;
  public map: any;

  constructor() {
    // building a feature 'thing'
    const vectorSource = new ol.source.Vector({});
    const thing = new ol.geom.Polygon([[
      ol.proj.transform([6.12, 52.23], 'EPSG:4326', 'EPSG:3857'),
      ol.proj.transform([6.125, 52.24], 'EPSG:4326', 'EPSG:3857'),
      ol.proj.transform([6.13, 52.23], 'EPSG:4326', 'EPSG:3857')
    ]]);
    const featurething = new ol.Feature({
      name: 'Thing',
      geometry: thing
    });
    vectorSource.addFeature(featurething);
    // building the map
    const twello = ol.proj.transform([6.11, 52.23], 'EPSG:4326', 'EPSG:3857');
    const osmlayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    const view = new ol.View({
      center: twello,
      zoom: 15
    });
    this.map = new ol.Map({
      layers: [osmlayer,
        new ol.layer.Vector({
          source: vectorSource
        })],
      view: view
    });

    const that = this;
    this.map.on('click', function (evt) {
      const pixel = [evt.pixel];
      that.map.forEachFeatureAtPixel(pixel[0], pixel[1], function (feature, layer) {
        console.log('Hit'); // *** show feature name? 
      });
    });
  }

  ngAfterViewInit() {
    this.map.setTarget(this.mapElement.nativeElement.id);
  }
}

Answer 1

The first solution is:

const that = this;
this.map.on('click', function(evt) {
   const pixel = evt.pixel;
   let selectedFeatures = 'Features: ';
   that.map.forEachFeatureAtPixel(pixel, function(feature, layer) {
      selectedFeatures += ' Region: ' + feature.get('N3NM');
      });
   document.getElementById('status').innerHTML = selectedFeatures;
 });

A second solution is:

const selectSingleClick = new ol.interaction.Select();
selectSingleClick.on('select', function (e) {
  let features = [];
  let selectedFeatures = 'Features: ';
  features = e.target.getFeatures().getArray();
  for (let i = 0; i < features.length; i++) {
     selectedFeatures += ' Region: ' + features[i].get('N3NM');
  }
  document.getElementById('status').innerHTML = selectedFeatures;
});